css选择器

本文将系统介绍CSS中常见的五类选择器：

• 复合选择器
• 关系选择器
• 属性选择器
• 伪类选择器
• 交互类伪类选择器

一、复合选择器（组合条件）

复合选择器通过组合多个选择条件，选中同时满足所有条件的元素。

交集选择器

语法：

选择器1选择器2 { 样式声明 }

选中同时匹配多个选择器的元素。

示例：

div.red { font-size: 24px; }

该规则表示： 选中同时是<div>标签且具有class="red"的元素。

注意事项：

1. 若包含标签选择器，必须置于首位；
2. 优先级由各选择器权重综合决定。

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

语法：

选择器1, 选择器2, 选择器3 { 样式声明 }

作用：为多个选择器统一设置相同样式。

示例：

h1, h3 { color: orange; }

效果：h1和h3元素都将显示橙色文字。

二、关系选择器（层级关系）

根据HTML元素的层级关系进行选择。

子选择器（>）

语法：

父元素 > 子元素 { 样式声明 }

作用：仅选择直接子元素。

示例：

div > span { color: red; }

仅影响<div>内第一层的<span>元素。

后代选择器（空格）

语法：

祖先 后代 { 样式声明 }

作用：选择所有层级的后代元素。

示例：

div span { font-size: 30px; }

区别：

• 子选择器（>）：仅选择直接子元素；
• 后代选择器（空格）：选择所有层级后代。

兄弟选择器

相邻兄弟选择器（+）

语法：

兄 + 弟 { 样式声明 }

选择紧邻的下一个兄弟元素。

通用兄弟选择器（~）

语法：

兄 ~ 弟 { 样式声明 }

选择该元素之后的所有兄弟。

示例：

p + span { background-color: red; }

为紧接<p>后的<span>添加红色背景。

三、属性选择器

根据元素属性及其值进行选择。

常用语法：

示例：

[title*="ac"] { background-color: pink; }

所有title属性包含"ac"的元素背景变为粉色。

四、伪类选择器（状态类）

根据元素状态或位置进行选择。

顺序伪类

示例：

li:nth-of-type(2n) { background-color: pink; }

为列表中所有偶数项设置粉色背景。

否定伪类:not()

语法：

选择器:not(条件) { 样式声明 }

示例：

li:not(.l1) { color: red; }

除class="l1"外的所有li元素文字变红。

五、交互类伪类选择器

主要用于超链接和交互元素，根据用户操作动态改变样式。

链接相关伪类

示例：

a:link { color: red; } a:visited { color: blueviolet; } a:hover { color: green; } a:active { color: orange; }

书写顺序记忆：LVHA

:link → :visited → :hover → :active

必须严格遵循此顺序，否则样式可能被覆盖。

鼠标交互示例

button:hover + .box { display: block; background-color: pink; }

鼠标悬停按钮时，显示相邻的.box元素并设置粉色背景。

总结与思维导图