2.2 CSS选择器
选择器是CSS的核心，用于精准定位HTML元素并应用样式。根据功能复杂度可分为基础选择器、复合选择器和伪类选择器。
基础选择器
| 选择器类型 | 语法 | 描述 | 示例 |
|---|---|---|---|
| 元素选择器 | 标签名 | 匹配指定标签的所有元素 | p { color: gray; }（匹配所有<p>标签） |
| 类选择器 | .类名 | 匹配class属性为指定值的元素 | .text-primary { color: blue; }（匹配class="text-primary"的元素） |
| ID选择器 | #ID名 | 匹配id属性为指定值的唯一元素 | #logo { width: 200px; }（匹配id="logo"的元素） |
| 通配符选择器 | * | 匹配所有元素 | * { margin: 0; padding: 0; }（重置所有元素的外边距和内边距） |
复合选择器
通过组合基础选择器实现更精确的匹配：
- 后代选择器：
A B（匹配A元素内的所有B后代元素，包括间接子元素）
示例：ul li { list-style: none; }（匹配<ul>内所有<li>） - 子元素选择器：
A > B（仅匹配A元素的直接子元素B）
示例：div > p { font-weight: bold; }（仅匹配<div>的直接子元素<p>） - 相邻兄弟选择器：
A + B（匹配A元素后的第一个同级B元素）
示例：h1 + p { margin-top: 0; }（匹配<h1>后的第一个<p>） - 并集选择器：
A, B（同时匹配A和B元素）
示例：h1, h2 { color: #333; }（匹配所有<h1>和<h2>）
伪类选择器
用于选择元素的特定状态或位置，常见伪类包括：
:hover：鼠标悬停时的元素:active：元素被点击时的状态:link/:visited：未访问/已访问的链接:nth-child(n)：匹配父元素的第n个子元素
案例2-2：导航栏高亮效果
html
复制代码
<nav>
<ul class="nav-list">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<style>
.nav-list { list-style: none; padding: 0; }
.nav-list li { display: inline-block; margin: 0 10px; }
.nav-list a {
text-decoration: none;
padding: 8px 12px;
color: #333;
border-radius: 4px;
}
/* 鼠标悬停时高亮 */
.nav-list a:hover {
background-color: #007bff;
color: white;
transition: background-color 0.3s; /* 平滑过渡效果 */
}
</style>注释：:hover伪类在鼠标指针悬停在<a>元素上时触发样式变更，需注意：
- 该伪类对非交互元素（如
<div>）在部分旧浏览器中可能需要设置cursor: pointer才能生效； - 结合
transition属性可实现样式的平滑过渡，提升用户体验。