CSS 选择器知识点

在 CSS 中，选择器是用于定位 HTML 元素并应用样式的关键工具。本文总结了常用的 CSS 选择器类型及用法，结合实例帮助理解。

一、复合选择器

复合选择器是由基础选择器组合而成，主要包括交集选择器和并集选择器。

1. 交集选择器

语法：选择器1选择器2选择器3···{}
作用：选中同时符合多个选择器条件的元素
注意事项 ：
- 若包含标签选择器，标签选择器必须放在第一位
- 优先级为各选择器优先级的合并计算
  
  /* 选中class为red的div元素 */
  div.red {
  font-size: 24px;
  }

2. 并集选择器（群组选择器）

语法：选择器1,选择器2,选择器3...{}
作用：同时选中多个选择器对应的元素
注意事项：各选择器优先级分别计算

/* 同时选中id为title1和class为title2的元素 */
#title1, .title2 {
color: orange;
}

二、关系选择器

用于根据元素之间的关系（父子、后代、兄弟）选择元素。

1. 子选择器

语法：父元素>子元素{}
作用：选中父元素的直接子元素
特点：仅选择直接子元素，不包含深层嵌套的后代

/* 选中id为cs的元素的直接子元素p中的直接子元素span */
#cs > p > span {
color: red;
}

2. 后代选择器

语法：祖先元素 后代元素{}
作用：选中祖先元素下的所有后代元素（包括直接和间接子元素）
特点：效率低于子选择器，能用子选择器时优先使用

/* 选中id为cs的元素内所有span后代元素 */
#cs span {
font-size: 30px;
}

3. 下一个兄弟选择器

语法：兄+弟{}
作用：选中紧跟在兄元素后的第一个弟元素

/* 选中id为cs的元素的子元素p后面紧邻的span元素 */
#cs > p + span {
background-color: red;
}

4. 后续所有兄弟选择器

语法：兄~弟{}
作用：选中兄元素后面的所有弟元素

三、属性选择器

根据元素的属性及属性值选择元素。

语法	作用
`[属性名]`	选择含有指定属性的元素
`[属性名=属性值]`	选择含有指定属性和属性值的元素
`[属性名^=属性值]`	选择属性值以指定值开头的元素
`[属性名$=属性值]`	选择属性值以指定值结尾的元素
`[属性名*=属性值]`	选择属性值包含指定值的元素

复制代码

/* 选择title属性值包含"ac"的元素 */
[title*="ac"] {
  background-color: pink;
}

/* 选择title属性值以"ab"开头的元素 */
[title^="ab"] {
  background-color: pink;
}

四、伪类选择器

用于选择处于特定状态的元素，不是固定的类，可根据情况动态变化。

1. 顺序伪类

基于所有子元素排序：
- :first-child：第一个子元素
- :last-child：最后一个子元素
- :nth-child(n)：第 n 个子元素（n 为数字，even表示偶数，odd表示奇数）
基于同类型子元素排序：
- :first-of-type：同类型第一个子元素
- :last-of-type：同类型最后一个子元素
- :nth-of-type(n)：同类型第 n 个子元素
  
  /* 选中ul中所有偶数位置的li元素 */
  li:nth-of-type(even) {
  background-color: pink;
  }

2. 否定伪类

语法：:not(选择器)
作用：排除符合指定选择器的元素

/* 选中所有class不是l1的li元素 */
li:not(.l1) {
color: red;
}

3. 元素状态伪类（以 a 标签为例）

:link：未访问过的链接
:visited：已访问过的链接（因隐私限制，通常只能修改颜色）
:hover：鼠标移入时的状态（可用于任何元素）
:active：鼠标点击时的状态

注意：超链接伪类需遵循LVHA顺序：:link → :visited → :hover → :active

复制代码

a:link { color: red; }          /* 未访问链接 */
a:visited { color: green; }     /* 已访问链接 */
a:hover { font-size: 30px; }    /* 鼠标移入 */
a:active { background: pink; }  /* 鼠标点击 */

总结

掌握各种 CSS 选择器的用法，能够帮助我们更精准地定位元素并应用样式。在实际开发中，应根据具体场景选择合适的选择器，兼顾代码可读性和执行效率。合理组合使用不同类型的选择器，可以实现复杂的样式效果。