内容发布更新时间 : 2024/5/17 10:45:53星期一 下面是文章的全部内容请认真阅读。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 10. X[title]

以下是代码片段： a[title] { color: green; }

属性选择器。比如上述代码匹配的是带有title属性的链接元素。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 11. X[title=\

以下是代码片段： a[href=http://bobd.cn] { color: #1f6053; }

属性选择器。 上面的代码匹配所有拥有href属性，且href为http://bobd.cn的所有链接。

这个功能很好，但是多少又有些局限。如果我们希望匹配href包含bobd.cn的所有链接该怎么做呢？看下一个选择器。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 12. X[title*=\

以下是代码片段： a[href*=\ color: #1f6053; }

属性选择器。正如我们想要的，上面代码匹配的是href中包含\的所有链接。 兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 13. X[href^=\

以下是代码片段： a[href^=\

background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

属性选择器。上面代码匹配的是href中所有以http开头的链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 13. X[href$=\

以下是代码片段： a[href^=\

background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

属性选择器。在属性选择器中使用$，用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。）

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 14. X[data-*=\

在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=\实现，需要这样做：

以下是代码片段： a[href$=\ a[href$=\ a[href$=\ a[href$=\ color: red; }

看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性，例如‘data-file’

html代码如下：

以下是代码片段：

css代码如下：

以下是代码片段：

a[data-filetype=\ color: red; }

这样所有链接到图片的链接字体颜色为红色。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 15. X[foo~=\

属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子：

html代码如下：

以下是代码片段：

css代码如下：

以下是代码片段：

a[data-info~=\ color: red; }

a[data-info~=\ border: 1px solid black; }

在上面例子中，匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 17. X:checked

checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。

以下是代码片段：

input[type=radio]:checked { border: 1px solid black; }

上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。 兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera 18. X:after和X:before

这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：

以下是代码片段：

h1:after {content:url(/i/logo.gif)}

上面的代码实现了在h1标题的后面显示一张图片。 我们也经常用它来实现清除浮动，写法如下：

以下是代码片段：