一、CSS 选择器基础：从单个元素到多个元素
CSS 选择器是用来定位 HTML 元素的工具，就像 “元素的地址”。最基础的选择器有：
-
元素选择器（按标签名定位）
css
p { color: red; } /* 所有<p>标签 */ div { background: #f0f0f0; } /* 所有<div>标签 */ -
ID 选择器（按元素 ID 定位，唯一）
css
#header { height: 100px; } /* ID为header的元素 */ -
类选择器（按元素 class 定位，可重复）
css
.button { padding: 10px; } /* 所有class包含button的元素 */ -
属性选择器（按元素属性定位）
css
[type="text"] { border: 1px solid #ccc; } /* 所有type="text"的元素 */
二、CSS 分组选择器：同时选中多个元素
分组选择器允许你用 ** 逗号 (,)** 将多个选择器组合，为它们应用相同的样式。
语法：
css
选择器1, 选择器2, 选择器3 {
属性: 值;
}
示例 1：同时设置 h1、h2、h3 的字体颜色
css
h1, h2, h3 {
color: #333;
font-family: Arial;
}
示例 2：混合不同类型的选择器
css
#header, .nav-item, [type="button"] {
margin-bottom: 10px;
}
分组选择器的优势：
- 减少 CSS 代码重复
- 统一管理相似元素的样式
- 提高代码可读性
三、CSS 嵌套选择器：基于层级关系定位元素
嵌套选择器（也叫组合选择器）通过元素之间的层级关系来定位元素。
常见的嵌套选择器有 4 种：
-
后代选择器（用空格分隔）
选中某个元素内部所有层级的目标元素。css
.container p { color: blue; } /* .container内部的所有<p>元素 */ -
子选择器（用
>分隔）
只选中某个元素的直接子元素（一级后代）。css
.parent > .child { font-weight: bold; } /* 只选.parent的直接子元素.child */ -
相邻兄弟选择器（用
+分隔）
选中某个元素紧接其后的同级元素。css
h1 + p { margin-top: 20px; } /* 只选h1后面的第一个<p>元素 */ -
通用兄弟选择器（用
~分隔）
选中某个元素后面所有同级的目标元素。css
img ~ p { color: gray; } /* 选img后面所有同级的<p>元素 */
嵌套选择器示例：
html
<div class="container">
<h2>标题</h2>
<p>第一段</p> <!-- 会被选中 -->
<div>
<p>第二段</p> <!-- 会被选中 -->
</div>
</div>
css
.container p { color: red; } /* 选中所有层级的<p> */
.container > p { color: blue; } /* 只选中直接子级的<p>（第一段） */
四、复杂 CSS 写法：组合多种选择器
实际开发中，我们常将多种选择器组合使用，实现更精准的元素定位。
1. 组合类选择器和元素选择器
css
/* 选中class为btn且是<button>标签的元素 */
button.btn {
background: #007bff;
color: white;
}
2. 多层嵌套选择器
css
/* 选中.header内部的.nav列表中的.active菜单项 */
.header .nav .active {
font-weight: bold;
color: #ff6600;
}
3. 属性和伪类组合
css
/* 选中所有disabled状态的输入框 */
input[disabled] {
background: #eee;
cursor: not-allowed;
}
4. 复杂示例：表单样式
css
/* 选中form中所有type为text的input的父级元素 */
form .form-group > input[type="text"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 选中焦点状态的input，并改变其父级的样式 */
form .form-group input:focus + label {
color: #007bff;
}
五、伪类和伪元素：特殊状态与特殊位置
伪类和伪元素是 CSS 中特殊的选择器，用于选中元素的特定状态或特定部分。
-
常见伪类（用单冒号
:表示）css
a:hover { color: red; } /* 鼠标悬停状态 */ input:focus { border: 2px solid blue; } /* 获得焦点状态 */ li:nth-child(odd) { background: #f0f0f0; } /* 奇数行 */ p:first-child { font-size: 18px; } /* 第一个子元素 */ -
常见伪元素（用双冒号
::表示）css
p::first-letter { font-size: 24px; } /* 首字母 */ p::before { content: "→ "; } /* 在元素前插入内容 */ p::after { content: " ←"; } /* 在元素后插入内容 */ ::selection { background: yellow; } /* 选中的文本 */ -
伪类与伪元素组合
css
/* 选中第一个段落的首字母 */ p:first-child::first-letter { color: red; font-size: 32px; }
六、选择器优先级：谁的样式会生效？
当多个选择器作用于同一元素时，CSS 会根据优先级规则决定使用哪个样式。
优先级从高到低：
- !important（强制优先级，但不推荐滥用）
- 内联样式（直接写在 HTML 元素的 style 属性中）
- ID 选择器（#id）
- 类 / 属性 / 伪类选择器（.class、[attr]、:hover）
- 元素 / 伪元素选择器（p、::before）
- 通配符选择器（*）
计算规则：
- ID 选择器：100 分
- 类 / 属性 / 伪类：10 分
- 元素 / 伪元素：1 分
- 通配符：0 分
示例：
css
#header { color: red; } /* 100分 */
.header h1 { color: blue; } /* 11分（1个类 + 1个元素） */
h1 { color: green; } /* 1分 */
最终 h1 的颜色是red（100 分优先级最高）。
七、最佳实践：如何写出高效的 CSS 选择器？
-
避免过度嵌套
不要写超过 3 层的嵌套选择器（如.parent .child .grandchild），会降低性能且难以维护。 -
优先使用类选择器
类选择器比元素选择器更灵活，更适合复用。 -
减少 ID 选择器的使用
ID 选择器优先级过高，容易导致样式冲突。 -
使用有意义的类名
如.btn-primary比.a1更易理解。 -
利用组合选择器
用.container > h2代替.container h2，精准定位减少误选。
八、完整示例：电商网站导航栏样式
html
预览
<nav class="main-nav">
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">商品分类</a></li>
<li class="has-submenu">
<a href="#">促销活动</a>
<ul class="submenu">
<li><a href="#">限时折扣</a></li>
<li><a href="#">满减优惠</a></li>
</ul>
</li>
</ul>
</nav>
css
/* 导航栏容器 */
.main-nav {
background: #333;
height: 50px;
}
/* 主菜单列表 */
.main-nav > ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 主菜单项 */
.main-nav > ul > li {
display: inline-block;
position: relative;
}
/* 主菜单链接 */
.main-nav > ul > li > a {
display: block;
color: white;
padding: 0 15px;
line-height: 50px;
text-decoration: none;
}
/* 激活状态的链接 */
.main-nav > ul > li > a.active {
background: #007bff;
}
/* 鼠标悬停效果 */
.main-nav > ul > li > a:hover {
background: #555;
}
/* 子菜单容器 */
.has-submenu .submenu {
display: none;
position: absolute;
background: #555;
width: 150px;
}
/* 子菜单项 */
.has-submenu:hover .submenu {
display: block;
}
/* 子菜单链接 */
.submenu li a {
display: block;
color: white;
padding: 10px 15px;
text-decoration: none;
}
/* 子菜单链接悬停 */
.submenu li a:hover {
background: #777;
}
通过掌握分组选择器、嵌套选择器和复杂组合，你可以精准控制网页中每一个元素的样式。建议多动手实践，在实际项目中加深理解！
