共计 1980 个字符，预计需要花费 5 分钟才能阅读完成。
当波及到 CSS 选择器时，大多数人都相熟常见的选择器，如类选择器、ID 选择器、标签选择器等等。然而，CSS 还提供了一些较为冷门但实用的选择器，上面介绍几个：
通用选择器（Universal Selector）：通用选择器应用 * 符号，能够匹配 HTML 文档中的任何元素。通用选择器不会抉择文档中不存在的元素，但会抉择 HTML 中的所有元素。
属性选择器（Attribute Selector）：属性选择器能够依据元素的属性及其属性值抉择元素。例如，能够应用 [attribute=value] 选择器抉择所有属性名为 attribute 的元素，并且属性值等于 value。还有一些其余的属性选择器能够抉择属性的结尾或结尾等。
子串匹配选择器（Substring Matching Selector）：子串匹配选择器能够依据元素的属性值中蕴含的子字符串抉择元素。例如，应用 [attribute*=value] 能够抉择所有属性名为 attribute 的元素，并且属性值中蕴含 value 子字符串。
后辈选择器（Descendant Selector）：后辈选择器应用空格分隔，能够抉择元素的后辈元素。例如，应用 ul li 能够抉择所有嵌套在 ul 元素内的 li 元素。
邻接选择器（Adjacent Sibling Selector）：邻接选择器应用 + 符号分隔，能够抉择紧接在另一个元素后的元素。例如，应用 h1 + p 能够抉择在 h1 元素后紧接着的 p 元素。
通用兄弟选择器（General Sibling Selector）：通用兄弟选择器应用 ~ 符号分隔，能够抉择与另一个元素相邻的所有同级元素。例如，应用 h1 ~ p 能够抉择所有与 h1 元素同级的 p 元素。
:empty 伪类选择器：能够用来抉择没有子元素的元素，例如 div:empty 能够抉择所有没有子元素的 div 元素。
:not 伪类选择器：能够用来抉择除了某个元素之外的所有元素。例如，p:not(.intro) 能够抉择所有没有 intro 类的 p 元素。
:checked 伪类选择器：能够用来抉择被选中的表单元素，例如 input:checked 能够抉择所有被选中的 input 元素。
:target 伪类选择器：能够用来抉择以后流动的锚点元素，例如 #section1:target 能够抉择以后流动的 ID 为 section1 的锚点元素。
:nth-of-type() 伪类选择器：能够用来抉择特定类型的元素中的特定子元素。例如，ul li:nth-of-type(2) 能够抉择所有 ul 元素中的第二个 li 元素。
:first-of-type 伪类选择器：能够用来抉择某个元素下第一个呈现的特定类型的子元素。例如，ul li:first-of-type 能够抉择每个 ul 中第一个 li 元素。
:last-of-type 伪类选择器：能够用来抉择某个元素下最初一个呈现的特定类型的子元素。例如，ul li:last-of-type 能够抉择每个 ul 中最初一个 li 元素。
:only-of-type 伪类选择器：能够用来抉择某个元素下惟一的特定类型的子元素。例如，div p:only-of-type 能够抉择每个 div 中惟一的 p 元素。
:lang() 伪类选择器：能够用来抉择特定语言的元素。例如，p:lang(en) 能够抉择所有带有 “en” 语言属性的 p 元素。
:root 伪类选择器：能够用来抉择文档的根元素，即 html 元素。例如，:root {font-size: 16px;} 能够将文档中所有元素的字体大小设置为 16px。
:focus-within 伪类选择器：能够用来抉择蕴含有焦点元素的父元素。例如，:focus-within {background-color: yellow;} 能够将蕴含有焦点元素的父元素的背景色设置为黄色。
[attribute^=value] 属性选择器：能够用来抉择具备特定属性值的元素。例如，input[type^=”button”] 能够抉择所有 type 属性值以 “button” 结尾的 input 元素。
[attribute$=value] 属性选择器：能够用来抉择具备特定属性值的元素。例如，a[href$=”.pdf”] 能够抉择所有 href 属性值以 “.pdf” 结尾的 a 元素。
[attribute=value] 属性选择器：能够用来抉择具备特定属性值的元素。例如，input[name=”user”] 能够抉择所有 name 属性值蕴含 “user” 的 input 元素。
: : before 和 : : after 伪元素选择器：能够用来在元素内容之前或之后插入内容。例如，p::before {content: “>>”;} 能够在每个 p 元素内容之前插入 “>>” 字符串。
这些是比拟罕用但比拟冷门的 CSS 选择器，能够依据须要应用它们来抉择特定的元素。同时，须要留神应用选择器时要尽量避免适度应用简单选择器，以放弃样式表的简洁和性能。
