再聊CSS的属性选择器

属性选择器是很强大很神奇的。很多时候可以帮助你摆脱一些棘手的问题，可以让你避免类名的添加，甚至还可以指出代码中的一些问题。属性选择器是复杂而又强大的，但不用担心，因为它也是易于学习和使用的。在本文中，将会学习到CSS属性选择器的强大功能以及如何在实际工作中运用它。并提供了一些关于如何使用属性选择器的一些个人想法。

我一直以来都觉得CSS属性选择器很强大，也特别的有魔性。记得第一次接触CSS属性选择器的时候，是在国外的某博客上，鼠标悬浮到链接上，可以立马的知道是外部链接还是本地链接，另外在下载资源的链接上可以立马看到下载的资源格式。这一切让我觉得好神奇，好强大。当然更令我感到惊奇的是，打印Web页面的时候，对应的链接文本后面居然能打印出其对应的链接地址。这些引起我强大好奇心，所以我决定去一探究竟，才知道这一切的魔力都来源于CSS的选择器： CSS属性选择器 ！

对于初学者，我想你此时或许也感到好奇。只要你有这样的好奇心就好办。通过接下来的内容学习之后，你除了能很快掌握前面提到的特性之外，你甚至还可以使用CSS属性选择器在你的项目中做一些Debug的功能，它们能很快的帮助你定位到问题的根源，帮助你修复其他无法解决的问题。而且这种体验非常的爽，就像是变魔术一样。你可能会认为你又再装逼了，其实你只要理解了CSS属性选择器的强大功能之后，你可能会觉得自己太夸张了。

CSS属性选择器的使用非常的简单，你只要把HTML的属性（包括自定义属性）放在一个中括号 [] 中即可，比如：

[href] {
    color: green;
}

任何具有 href 属性而且没有其他选择器指定的样式覆盖，那么文本的颜色会变成 green 。

注意CSS选择器权重相关的知识，就权重而言，CSS属性选择器和类选择器权重是一样的。如果你对CSS选择器权重相关的知识有点模糊的话，建议你花点时间阅读《 你应该知道的一些事情：CSS权重 》一文。

上面的示例，只是CSS属性最基本的用法，其实它可以做更多的事情。就像人体的DNA信息一样，它们有内在的逻辑（比如说简单的正则规则），可以帮助你选择各种属性组合和值。可以匹配属性中的任何属性，甚至是字符串值，而不仅仅是精确的匹配标签、类或 id 选择器。

在深入探讨CSS属性选择器其他一些高级用法之前，先来简单的了解一点点基础知道，这些基础知识有助于你更好，更快的掌握CSS属性选择器。

CSS属性选择器发展历程

CSS属性选择器最早出现在CSS2之中。随着W3C规范模块化划分的改革，时至今日也就没有CSS3,CSS4之说了。我们也跟着规范来说。在 CSS Selectors Level 3 和 CSS Selectors Level 4 两个版本中都有CSS属性选择器的身影。从两个版本的规范中中介绍的对比来看，Level4从Level3的四个部分增加到了五个部分：

• 属性和属性值选择器，CSS2最早引入的四个属性选择器： [attr] 、 [attr = val] 、 [attr ~= val] 和 [attr |= val]
• 匹配属性选择器的子字符串，CSS3新引入的三个属性选择器： [attr ^= val] 、 [attr $= val] 和 [attr *= val]
• 属性选择器和命名空间：属性选择器中属性名是CSS限定名称，前面声明的名称空间前缀可以放在名称空间分隔线分隔的属性名前面，比如 [*|attr] { color: yellow } （表示只与属性 attr 匹配的元素，而不考虑属性的名称空间）
• DTD 中的默认属性值：属性选择器表示文档树中的属性值。如何构造文档树超出了选择器的范围。在某些文档格式中，默认属性值可以在 DTD 中或其他地方定义，但这些值嗡有在文档树中出现时由属性选择器选择。 （这么多年以来，几乎未曾用过）
• 忽略大小写敏感：比如 [attr = "val" i] ,这是在Level4中新增的一条。默认情况下，选择器中的属性名和值有可能有大小写敏感之分（需要取决于文档语言），为了不受文档语言规则影响能匹配到属性值，属性选择器可以在右括号 ] 前带上一个 i （或 I ）标识符。当出现此标志时， UAs 必须在 ASCII 范围内不敏感地匹配属性的值大小写。

特别记住了，现在W3C规范中已经没有CSS版本号一说（比如CSS2,CSS3，CSS4之类的），现在都是按功能模块化进行划分，然后给功能模块添加Level x来进行区分，比如Level 3、Level 4之类的。所以，今后文章看到CSS4一说的，基本上都是在忽悠你的。切记！切记！切记！(^_^)

正则表达式

在上面的内容中，我们看到了在属性选择器中有 [attr ^= val] 、 [attr $= val] 和 [attr *= val] 。其中 ^ 、 $ 、 * 之类的符号，是不是特别的像JavaScript中正则表达式中使用到的一些符号。其实这些关键字符，和JavaScript中的正则表达式中的符号类似。这些符号在CSS属性选择器中也有着其特殊的含义：

• ^ ：表示字符串开始位置匹配
• $ ：表示字符串结束位置匹配
• * ：表示字符串任意位置匹配
• i ：表示字符串匹配不区分大小写敏感

属性选择器如何使用？

属性选择器可以独立存在，也可以更具体，比如下面的选择器可以匹配到所有带 title 属性的 div ：

div[title]

也可以像下面这样匹配到 div 中带 title 属性的后代子元素：

div [title]

注意这两者之间的差异，如果它们之间没有空格，意味着属性在同一个元素上，如果有空格，则意味着是一个后代选择器，父元素是一个 div ，后代元素是带 title 属性的任何元素。表示选择具有该属性的所有后代元素。

在使用属性选择器的时候，也可以设置属性具体的值：

div[title="w3cplus"]

该选择器可以让你匹配到带有 title 属性，而且其值必须是 w3cplus 的所有 div 。记住，其值必须是 w3cplus ，如果 title 的值是 W3cplus 或 W3CPLUS 之类的，那就无法匹配上，因为它们有大小写敏感：

当然，如果你要处理对值大小敏感还是有办法的，稍后我们会介绍。请继续往下阅读。

有的时候你的 title 不会只是一个单词，有可能变成了 I like w3cpuls 或者 I am from w3cplus ，这个时候你还想通过 w3cplus 值来进行匹配，那么你需要在等 = 前添加一个波浪号 ~ ，即可 [attr ~= val] 的形式，比如：

div[title~="w3cplus"]

从上面的结果可以看出， [attr ~= "val"] 属性选择器，只要是 attr 属性的值包含 val