CSS中常用的一些样式选择符

当涉及到 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 选择器，可以根据需要使用它们来选择特定的元素。同时，需要注意使用选择器时要尽量避免过度使用复杂选择器，以保持样式表的简洁和性能。