CSS 选择器
03-css2026/11/14
基础选择器
1. 标签选择器（Element Selector）
选择所有某个标签的元素：
/* 选择所有的 <p> 元素 */
p {
color: blue;
}
2. 类选择器（Class Selector）
根据元素的 class 属性来选择。以点 . 开头。
- 一个元素可以有多个类，用空格隔开。
- 一个类可以被多个元素使用。
<p class="warning">这是一个警告信息</p>
<div class="warning highlighted">这是一个高亮的警告框</div>
/* 选择所有 class 包含 "warning" 的元素 */
.warning {
background-color: yellow;
border-left: 3px solid red;
}
/* 选择所有 class 同时包含 "warning" 和 "highlighted" 的元素 */
.highlighted {
font-weight: bold;
}
3. ID 选择器（ID Selector）
根据元素的 id 属性来选择。以井号 # 开头。
- 一个 ID 在页面中应该是唯一的。
- specificity 很高，难以被覆盖，应谨慎使用。
<div id="main-header">网站主标题</div>
/* 选择 id 为 "main-header" 的元素 */
#main-header {
background-color: #333;
color: white;
}
4. 通配符选择器（Universal Selector）
使用星号 *，匹配页面中的每一个元素。
/* 移除所有元素的默认外边距和内边距（常用于 CSS Reset） */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 更现代的盒模型计算方式 */
}
组合选择器（组合多个选择器）
1. 后代选择器（Descendant）（空格）
选择位于某个元素内部的所有指定后代元素（不限层级）。
/* 选择 .nav 的所有子元素 <li> */
.nav li {
color: red;
}
2. 子选择器（Child）（>）
选择作为某个元素直接子元素的元素（仅限一级层级）。
/* 只选择 .nav 的直接子元素 <li> */
.nav > li {
border-bottom: 1px solid #ccc;
}
3. 相邻兄弟选择器（Adjacent Sibling）（+）
选择紧接在另一个元素之后的兄弟元素（紧挨着的下一个）。
<h2>这是一个标题</h2>
<p>这个段落紧跟在 h2 后面，会被选中。</p>
<p>这个段落不会被选中。</p>
/* 选择紧跟在 <h2> 后面的第一个 <p> 元素 */
h2 + p {
margin-top: 0;
font-style: italic;
}
4. 通用兄弟选择器（General Sibling）（~）
选择某个元素之后的所有指定兄弟元素。
<h3>一个小标题</h3>
<p>这个段落会被选中。</p>
<div>一个 div</div>
<p>这个段落也会被选中。</p>
/* 选择 <h3> 元素之后的所有 <p> 兄弟元素 */
h3 ~ p {
color: #666;
}
5. 组选择器（Group Selector）（,）
/* 对多个元素使用同样样式： */
h1, h2, p {
color: #333;
}