选择器

属性选择器

最常用，牢记之。

[attr] 表示带有以 attr 命名的属性的元素。

[attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value] 表示带有以 attr 命名的属性的元素，并且 attr 对应的属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value] 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（- 为连字符，Unicode 编码为 U+002 D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN、zh-TW 可以用 zh 作为 value）。

[attr^=value] 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。典型例子自定义属性 data-xx

[attr$=value] 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

[attr*=value] 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

[attr operator value i] 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s] 实验性 在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

class 选择器和 ID 选择器都可视作是属性选择器的特殊情况 类选择器：.value 等价于 [class~=value] 🆔 选择器： #value 等价于 [id=value]

举个 🌰

• [foo|='bar'] 命中 foo 属性的值以 bar 或者 bar- 开头
• [foo~='bar'] 命中 foo 属性的值包含 bar 这个 词
• [foo*='bar'] 命中 foo 属性的值包含 bar 这个 子串
• [foo^='bar'] 命中 foo 属性的值以 bar 开头
• [foo$='bar'] 命中 foo 属性的值以 bar 结尾

类型选择器

类型选择器用来匹配不同类型的元素，比较特殊的是，类型选择器可以使用 @namespace 赋予命名空间。这在处理包含多个命名空间的文件时很有用，比如带有内联 SVG 或 MathML 的 HTML 文档，或者混合了多个词汇的 XML 文档。

举个 🌰

ns|h 1——匹配命名空间为 ns 的 \<h1> 元素 *|h 1——匹配所有 \<h1> 元素 |h 1——匹配没有声明命名空间的 \<h1> 元素

伪元素选择器

正如名称所暗示的，伪元素和伪类的区别就是，前者表示结构，后者强调状态。

::selection

::before

::after

::first-line

伪类选择器

伪类始终指代所依附的元素, 也就是说，这个伪类是元素自身所具备的属性。典型的例子是 :first-child 伪类

举个 🌰

p:first-child 表示第一个段落

p>:first-child 表示段落里的第一个元素

:not() 否定伪类

:hover

:visited

更多伪类和伪元素相关的知识单独撰写。

通用选择器

即 *

不推荐使用，性能最差。

其他

• 后代选择器 h2 em

  • 子元素选择器 h2>em 子元素可以视作后代的特殊情况

• 同胞选择器

  • 紧邻同胞 h2 + p
  • 后续同胞 h2 ~ p

浏览器原生嵌套语法

Native CSS nesting landed

和 Sass 的嵌套语法几乎没区别，

唯一的区别是 & 是强制要写的。

If the selector starts with \&, \@, \:, ., >, ~, +, #, [ or *, you can skip the & symbol.