你真的认识 CSS 选取器吗？

nqkk58

前言

相信针对 CSS 选取器大众都不陌生吧，但其实选取器的种类还是非常繁多的，直接抱着 W3C 的草案啃亦无什么意思。因此本文对 CSS 选取器做了有些总结，期盼能够帮大众巩固一下选取器的知识，再顺便瞧瞧有无什么你还不晓得的选取器吧。

元素选取器（Elemental selectors）

元素选取器，顾名思义，便是经过 HTML 元素来进行匹配的选取器。

类型选取器（Type selectors）

类型选取器是经过 HTML 元素类型（标签）来选取的：

// 选取所有 <p> 元素 p { font-weigt: bold; } // 选取所有 <h1> 元素 h1 { color: red; }

咱们晓得选取器是能够进行链式连接的，然则在每一个选取器中，类型选取器只能显现一次，且必要位置于第1位，否则该选取器就匹配不到任何元素的。

通用选取器（Universal Selector）

通用选取器其实是一种特殊的类型选取器，它运用星号 * 来暗示，能够匹配任意类型的 HTML 元素。因此在单独运用时，它会选取每一个元素，而后为它们指定样式：

// 将所有元素设置为红色 * { color: red; }

在无元素选取器被选取的状况下时，通用选取器会隐式的存在：

.danger { color: red; } // 等同于 *.danger { color: red; }

属性选取器（Attribute selectors）

属性选取器经过和 HTML 元素的属性进行匹配来选取的，它有以下的写法：

// 持有 class 属性的元素 [class] {color: red;} // 持有 class 的值为 red 的元素，即 class=red [class=red] {color: red;} // 持有 class 的值包括 red 的元素，例如 class=flex red bold[class~=red] {color: red;} // 持有 class 的值为 red 或以 red- 做为前缀的元素，例如 class=red-text [class|=red] {color: red;} // 持有 class 的值以 red 做为前缀的元素，例如 class=redtext[class^=red] {color: red;} // 持有 class 的值以 red 做为后缀的元素，例如 class=textred [class$=red] {color: red;} // 持有 class 的值包括 red 的元素，例如 class=teredxt [class*=red] {color: red;} // 属性选取器能够连续调用 [class~=red][id=first] {color: red;}

虽然例子中咱们只运用了 class 属性，不外它能够对任何属性进行匹配，例如 id，value 等，或咱们自定义的属性。

体积写区分

在默认状况下，选取器的体积写区分是和文档的语言相同的，例如 HTML 就不区分体积写。不外在 Selectors Level 4 草案中引入了新的标识符 i 和 s 用于手动标识是不是必须区分体积写：

i 为 Case-insensitive modifier，即不区分体积写s 为 Case-sensitive modifier，即区分体积写

// 不区分体积写，即 red, RED, ReD 等都能够匹配[class=red i] {color: red;} // 区分体积写，red 匹配，RED 则不匹配 [class=red s] {color: red;}

不外必须重视的是，标识符 i 已然得到主流浏览器的支持，然则标识符 s的支持度则不太阳光：