CSS 属性选择器

E[att]

语法: E[att]{ sRules }

说明: 选择具有att属性的E元素

a[class]{color:#f00;}

上述表示如果a链接里含class元素, 则显示红色.

E[att="val"]

语法: E[att="val"]{ sRules }

说明: 选择具有att属性且属性值等于val的E元素。

a[class="external"]{color:#f00;}

上述表示如果a链接的class属性等于external样式的, 则显示红色.

E[att~="val"]

语法: E[att~="val"]{ sRules }

说明: 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

a[class~="external"]{color:#f00;}

上述表示如果a链接的class属性里含有external样式的, 则显示红色.

E[att|="val"]

语法: E[att|="val"]{ sRules }

说明: 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

li[class|="test3"]{color:#f00;}

上述表示如果li的class属性里含有"test3-"开头的样式, 则显示红色.

E[att^="val"]

语法: E[att^="val"]{ sRules } (CSS3)

说明: 选择具有att属性且属性值为以val开头的字符串的E元素。

li[class^="a"]{color:#f00;}

上述表示如果li的class属性里含有以a开头的样式, 则显示红色.

E[att$="val"]

语法: E[att$="val"]{ sRules } (CSS3)

说明: 选择具有att属性且属性值为以val结尾的字符串的E元素。

li[class$="a"]{color:#f00;}

上述表示如果li的class属性里含有以a结尾的样式, 则显示红色.

E[att*="val"]

语法: E[att*="val"]{ sRules } (CSS3)

说明: 选择具有att属性且属性值为包含val的字符串的E元素。

li[class*="a"]{color:#f00;}

上述表示如果li的class属性里含有以a的样式, 则显示红色.

应用例子

运用属性选择器给外部链接添加外链图标

a[href^="http:"] 
{ background: url(images/externalLink.gif) no-repeat right top;...}

这样会突出显示所有外部链接, 但是也会选中使用绝对URL而不是相对URL的内部链接

为了避免这个问题, 需要重新设置指向自己站点的所有链接, 删除它们的外部链接图标: 

a[herf^=”http://yoursite.com”]{background-image:none;...}

也可以对邮件链接也进突出显示

a[href^="mailto:"]{background:url(images/email.png) no-repeat right top; ....}

也可以突出显示可以下载的文档摘要,订阅

a[href$=".pdf"]... 
a[href$=".exe"]...
a[href$=".rss"]...

简单效果如下:

这些都有助于改进用户在站点上的浏览体验(-. - IE6不支持 忽视之...)

习题一

<
>