浅谈CSS中的选择器

导航

1. CSS特性与优先级
2. CSS选择器权重计算 | QT-7274 (qt7274.co)

交集选择器

使用场景：选中同时满足条件的所有选择器。

代码示例：

p.red {
  color: red;
}

注意：

1. 标签要写在选择器的开头，例如p元素。
2. 选择器之间没有空格。
3. id选择器理论上可以作为交集的条件，但没有意义。
4. 交集选择器中不可能出现两个元素选择器。
5. 元素选择器配合类名选择器使用频率较多。

并集选择器

使用场景：同时选择满足其中任意一个选择器条件的元素。
代码示例：

h1, h2 {
  color: blue;
}

注意；

1. 多个选择器通过**,**连接，此处,的含义就是或。
2. 需要注意的是，并集选择器中的选择器顺序不影响选择结果。无论选择器的顺序如何，只要满足其中任意一个选择器的条件，元素就会被选中。
3. 一般竖着写。
4. 任何形式的选择器都可以作为并集选择器的一部分。
5. 并集选择器通常用于集体声明，可以缩小样式表体积。

后代选择器

使用场景：选中指定元素中，符合要求的后代元素。

代码示例：

ul li{
	color: red;
}

注意：

1. 选择器之间，以空格隔开。
2. 后代选择器，最终选择的是后代，不选中祖先。
3. 儿子、孙子、重孙子都算是后代。
4. 结构一定要符合HTML的嵌套要求。

子代选择器

使用场景：选择指定元素中，符合要求的子元素（儿子元素）。

代码示例：

div>a {
	color: red;
}

注意：

1. 选择器之间以**>**隔开。
2. 子代选择器，最终选择的是子代，不是父级。
3. 注意子元素和后代元素的区别。

兄弟选择器

相邻兄弟选择器

使用场景：选中指定元素后，符合条件的相邻兄弟元素。

相邻：紧挨着当前元素的下一个元素。

代码示例：

div+p {
	color: red;
}

注意：

1. 选择器之间以**+**连接。

通用兄弟选择器

使用场景：选中指定元素后，符合条件的所有兄弟元素。

代码示例：

div~p {
	color: red;
}

注意：

1. 选择器之间以**~**连接。

属性选择器

使用场景：选中属性值符合一定要求的元素。

代码示例：

/* 选中具有title属性的元素 */
div[title]{color:red;}

/* 选中title属性值为qt7274的元素 */
div[title="qt7274"]{color:red;}

/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}

/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}

/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

注意：

1. [属性名] 选中具有某个属性的元素。
2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

伪类选择器

使用场景：选中特殊状态的元素。

伪——虚假的，不是真实存在的。

伪类——像类(class)，但不是类，是元素的一种特殊状态。

动态伪类

1. :link 超链接未被访问的状态。

2. :visited 超链接访问过的状态。

3. :hover 鼠标悬停在元素上的状态。

4. :active 元素激活的状态。

   在CSS中，元素的激活状态（Active State）是指当用户与元素进行交互并触发其激活行为时的状态。通常，元素的激活状态与用户的操作有关，例如点击、按下鼠标按钮或按下键盘按键等。

   一旦用户释放鼠标按钮或松开键盘按键，元素就会恢复到正常状态。

5. :focus获取焦点的元素。

   表单类元素才能使用:focus伪类。

   当用户：点击元素、触摸元素、或通过键盘的“tab”键等方式选择元素时，就是获得焦点。

结构伪类

常用结构伪类

1. :first-child 所有兄弟元素中的第一个。
2. :last-child 所有兄弟元素中的最后一个。
3. :nth-child(n) 所有兄弟元素中的第 n 个。
4. :first-of-type 所有同类型兄弟元素中的第一个。
5. :last-of-type 所有同类型兄弟元素中的最后一个。
6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。

关于n的值：

1. 0 或 不写 ：什么都选不中 —— 几乎不用。
2. n ：选中所有子元素 —— 几乎不用。
3. 1~正无穷的整数 ：选中对应序号的子元素。
4. 2n 或 even ：选中序号为偶数的子元素。
5. 2n+1 或 odd ：选中序号为奇数的子元素。
6. -n+3 ：选中的是前 3 个。

不常用结构伪类

1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。
3. :only-child 选择没有兄弟的元素（独生子女）。
4. :only-of-type 选择没有同类型兄弟的元素。
5. :root 根元素。
6. :empty 内容为空元素（空格也算内容）。

否定伪类

:not(选择器) 排除满足括号中条件的元素。

UI伪类

1. :checked 被选中的复选框或单选按钮。
2. :enable 可用的表单元素（没有 disabled 属性）。
3. :disabled 不可用的表单元素（有 disabled 属性）。

目标伪类

:target 选中锚点指向的元素。

语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）

伪元素选择器

使用场景：选中元素中的一些特殊位置

常用伪元素：

• ::first-letter 选中元素中的第一个文字。
• ::first-line 选中元素中的第一行文字。
• ::selection 选中被鼠标选中的内容。
• ::placeholder 选中输入框的提示文字。
• ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
• ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。