1.元素选择器（标签选择器）
元素名称{
}
2类选择器
以点开头{
}
3.id选择器器
以#号开头
4.后代选择器
空格分隔
5.子类选择器
>大于号分隔
6.相邻兄弟选择器
+连接
选择与指定元素在同一层级且紧接在它后面的元素（只有一个）。
h2 + p {
color: green;
}
7.通用兄弟选择器：
~波浪号连接
选择与指定元素在同一层级的所有后续兄弟元素（多个）。
h2 ~ p {
color: black;
}
8.群组选择器（
，分隔）：
允许您同时选择多个元素，并将相同的样式应用于它们。
h1, h2, p {
color: blue;
}
9.属性选择器 等于属性选择器(
[attribute="value"]): 选择具有指定属性且属性值完全等于指定值的元素。
a[target="_blank"] {
color: red;
}
10.包含属性选择器([attribute~="value"]):
选择属性值包含指定完整子串的元素。
a[title~="example"] {
color: green;
}
11.起始属性选择器([attribute^="value"]):
选择属性值以指定子串开头的元素。
a[href^="https"] {
color: black;
}
12.结尾属性选择器([attribute$="value"]):
选择属性值以指定子串结尾的元素。
a[href$=".pdf"] {
color: blue;
}
13.子串属性选择器([attribute*="value"]):
选择属性值包含指定子串的元素。
a[href*="example"] {
color: red;
}
14. 伪类选择器
动态伪类选择器：用于选择处于特定状态的元素。
:hover：当鼠标指针悬停在元素上时触发。
:active：当元素被用户激活（例如点击）时触发，选择活动链接（鼠标点击未释放时的状态）。
:focus：选择获得焦点的元素，如通过键盘或鼠标点击选中的元素。当元素获得焦点时触发，常见于输入框、按钮等。
:visited：选择已访问过的链接。
:link：选择未访问过的链接。
结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。
:first-child：选择父元素的第一个子元素。
:last-child：选择父元素的最后一个子元素。
:nth-child(n)：选择父元素的第n个子元素，n可以是数字、关键词（如"even"和"odd"）或公式（如2n+1）。
:nth-last-child(n)：类似于:nth-child(n)，但它是从最后一个子元素开始计数的。
:only-child：选择父元素仅有一个子元素，且该子元素匹配选择器的元素。
:first-of-type：选择父元素下相同类型元素的第一个子元素。
:last-of-type：选择父元素下相同类型元素的最后一个子元素。
:nth-of-type(n)：选择父元素下相同类型元素的第n个子元素。
:nth-last-of-type(n)：类似于:nth-of-type(n)，但它是从相同类型元素的最后一个子元素开始计数的。
:only-of-type：选择父元素下与其类型相同的唯一子元素。
:empty（空伪类）：选择没有任何子元素（包括文本节点）的元素。
表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。
:checked：选择被选中的表单元素，如单选框、复选框等。
:enabled：选择启用的表单元素。
:disabled：选择被禁用的表单元素。
:read-only：选择只读的表单元素。
:read-write：选择可写的表单元素。
目标伪类选择器:
:target：选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。
否定伪类选择器:
:not(selector)：选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。
/* 动态伪类选择器 */
a:hover {
color: red;
}
/* 结构伪类选择器 */
ul li:first-child {
font-weight: bold;
}
/* 表单伪类选择器 */
input[type="checkbox"]:checked {
background-color: yellow;
}
/* 目标伪类选择器 */
:target {
border: 2px solid blue;
}
/* 否定伪类选择器 */
div:not(.special) {
color: gray;
}
15:伪类元素选择器
伪元素选择器（::开头）: 用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式。
文本相关伪元素
::first-letter：用于选择文本块的第一个字母，并允许为其设置特殊的样式。这常用于实现首字下沉或特殊首字母效果。
::first-line：用于选择文本块的第一行，并允许为其设置与后续文本不同的样式。这常用于强调段落或文本块的开头部分。
内容生成伪元素
::before：在元素的内容之前插入新的内容或装饰。这通常与content属性一起使用，以定义要插入的具体内容。
::after：在元素的内容之后插入新的内容或装饰。同样，这也需要content属性来指定要插入的内容。
p::first-line {
color: blue;
}
p::first-letter {
color: red;
}
p::before {
content: "Before: ";
color: green;
}
p::after {
content: " After";
color: black;
}
16.通配符选择器（*）:
选择页面上的所有元素。它在特定情况下（如重置样式）有着特殊的用途。
17.根伪类选择器（:root）:
选择文档的根元素（通常是<html>元素），并经常用于设置全局变量（CSS自定义属性）。
18.语言伪类选择器（:lang）：
用于选择具有特定语言属性的元素。它基于lang属性来选择元素，这在处理多语言网站时非常有用。
标签：伪类,color,元素,用法,选择,选择器,css,属性 From： https://www.cnblogs.com/miwaiwai/p/18449737