你真的认识 CSS 选取器吗？-外链论坛

nqkk58 发表于 2024-6-30 06:31:27

你真的认识 CSS 选取器吗？

<h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</h2>
相信针对 CSS 选取器大众都不陌生吧，但其实选取器的种类还是非常繁多的，直接抱着 W3C 的草案啃亦无什么意思。因此本文对 CSS 选取器做了有些总结，期盼能够帮大众巩固一下选取器的知识，再顺便瞧瞧有无什么你还不晓得的选取器吧。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">元素选取器（Elemental selectors）</h2>
元素选取器，顾名思义，便是经过 HTML 元素来进行匹配的选取器。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">类型选取器（Type selectors）</h3>
类型选取器是经过 HTML 元素类型（标签）来选取的：
<div style="color: black; text-align: left; margin-bottom: 10px;">// 选取所有 元素
 p { font-weigt: bold; }

 // 选取所有 <h1> 元素
 h1 { color: red; }
</div>
咱们晓得选取器是能够进行链式连接的，然则在每一个选取器中，类型选取器只能显现一次，且必要位置于第1位，否则该选取器就匹配不到任何元素的。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">通用选取器（Universal Selector）</h3>
通用选取器其实是一种特殊的类型选取器，它运用星号 * 来暗示，能够匹配任意类型的 HTML 元素。因此在单独运用时，它会选取每一个元素，而后为它们指定样式：
<div style="color: black; text-align: left; margin-bottom: 10px;">// 将所有元素设置为红色
 * { color: red; }</div>
在无元素选取器被选取的状况下时，通用选取器会隐式的存在：
<div style="color: black; text-align: left; margin-bottom: 10px;">.danger { color: red; }
 // 等同于
 *.danger { color: red; }
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">属性选取器（Attribute selectors）</h2>
属性选取器经过和 HTML 元素的属性进行匹配来选取的，它有以下的写法：
<div style="color: black; text-align: left; margin-bottom: 10px;">// 持有 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;}
</div>
虽然例子中咱们只运用了 class 属性，不外它能够对任何属性进行匹配，例如 id，value 等，或咱们自定义的属性。 
<h3 style="color: black; text-align: left; margin-bottom: 10px;">体积写区分</h3>
在默认状况下，选取器的体积写区分是和文档的语言相同的，例如 HTML 就不区分体积写。不外在 Selectors Level 4 草案中引入了新的标识符 i 和 s 用于手动标识是不是必须区分体积写：i 为 Case-insensitive modifier，即不区分体积写s 为 Case-sensitive modifier，即区分体积写<div style="color: black; text-align: left; margin-bottom: 10px;">// 不区分体积写，即 red, RED, ReD 等都能够匹配[class=red i] {color: red;}

 // 区分体积写，red 匹配，RED 则不匹配
 [class=red s] {color: red;}
</div>
不外必须重视的是，标识符 i 已然得到主流浏览器的支持，然则标识符 s的支持度则不太阳光：

页: [1]

外链论坛's Archiver

你真的认识 CSS 选取器吗？