一、CSS 选择器基础：快速掌握核心概念
-
什么是选择器？
CSS 选择器就像 “网页元素的遥控器”，用于定位 HTML 中的特定元素并应用样式。/* 结构：选择器 { 属性: 值; } */ p { color: red; } /* 选择所有<p>元素，文字变红 */ -
元素选择器（标签选择器）
- 直接用 HTML 标签名作为选择器（如
div,h1,a）。 - 作用于页面中所有该类型的元素。
h2 { font-size: 20px; } /* 所有<h2>标题字体大小为20px */ img { border: 1px solid gray; } /* 所有图片添加边框 */ - 直接用 HTML 标签名作为选择器（如
-
类选择器（Class Selector）
- 通过元素的
class属性匹配，可复用（一个元素可拥有多个类）。 - 命名规则：
- 必须以
.开头（如.highlight）。 - 只能包含字母、数字、连字符（
-）、下划线（_）。 - 不能以数字开头，不能包含空格。
<!-- HTML --> <p class="error-message">这是错误提示</p>/* CSS */ .error-message { color: red; } /* 所有class="error-message"的元素变红 */ .btn-primary { background: blue; } /* 主按钮样式 */ - 必须以
- 通过元素的
-
ID 选择器
- 通过元素的
id属性匹配，必须唯一（一个页面中不能重复）。 - 命名规则与类相似，但以
#开头（如#header）。
<!-- HTML --> <div id="main-content">内容区域</div>/* CSS */ #main-content { width: 800px; } /* id="main-content"的元素宽度为800px */ - 通过元素的
-
通配符选择器（
*）- 匹配所有元素，常用于全局样式重置。
* { margin: 0; padding: 0; } /* 所有元素的边距重置为0 */
二、组合选择器：多条件筛选元素
-
后代选择器（空格分隔）
- 选择某个元素内部的所有后代元素（无论嵌套多深）。
article p { line-height: 1.6; } /* 所有<article>内的<p>元素行高为1.6 */ -
子选择器（>`）
- 只选择某个元素的直接子元素（一级子元素）。
nav > ul { background: lightgray; } /* 导航栏(nav)的直接子元素<ul>添加背景色 */ -
相邻兄弟选择器（
+）- 选择紧接在另一个元素后的同级元素。
h3 + p { margin-top: 10px; } /* 每个<h3>后的第一个<p>元素顶部边距为10px */ -
通用兄弟选择器（
~）- 选择前面某个元素后的所有同级元素。
img ~ figcaption { font-style: italic; } /* 每个<img>后的所有<figcaption>变斜体 */
三、属性选择器：按元素属性筛选
通过元素的属性或属性值来选择元素。
[disabled] { opacity: 0.5; } /* 所有带disabled属性的元素透明度降低 */
a[target="_blank"] { color: purple; } /* 所有打开新窗口的链接变紫色 */
input[type="email"] { border-color: blue; } /* 邮箱输入框边框变蓝 */
四、伪类选择器（Pseudo-classes）
定义：伪类用于选择处于特定状态或位置的元素，以冒号 : 开头。
1. 动态伪类（用户交互状态）
a:hover { color: red; } /* 鼠标悬停时链接变红 */
button:active { background: blue; } /* 按钮被点击时背景变蓝 */
input:focus { outline: 2px solid green; } /* 输入框获得焦点时显示绿色边框 */
a:visited { color: purple; } /* 已访问链接变紫色 */
2. 结构伪类（位置关系）
li:first-child { font-weight: bold; } /* 第一个列表项加粗 */
li:last-child { border-bottom: none; } /* 最后一个列表项去掉下边框 */
p:nth-child(even) { background: #f0f0f0; } /* 偶数位置的段落添加浅灰色背景 */
p:nth-child(3) { color: blue; } /* 第三个段落变蓝色 */
p:nth-of-type(odd) { font-style: italic; } /* 奇数位置的<p>元素变斜体 */
3. 逻辑伪类（条件筛选）
:not(.highlight) { opacity: 0.8; } /* 非.highlight类的元素透明度降低 */
input:required { border: 1px solid red; } /* 必填字段添加红色边框 */
input:disabled { background: #eee; } /* 禁用的输入框添加灰色背景 */
4. 目标伪类（URL 锚点）
:target { background: yellow; } /* 当前URL锚点对应的元素高亮 */
五、伪元素选择器（Pseudo-elements）
定义：伪元素用于选择元素的特定部分（如首字母、内容前后插入的虚拟元素），以双冒号 :: 开头（单冒号也兼容）。
1. 内容插入伪元素
p::before {
content: "▶ "; /* 在每个<p>元素前插入箭头符号 */
color: red;
}
p::after {
content: " ✅"; /* 在每个<p>元素后插入对勾符号 */
}
blockquote::before {
content: open-quote; /* 插入左引号 */
font-size: 2em;
}
2. 文本片段伪元素
p::first-letter {
font-size: 2em; /* 段落首字母放大 */
font-weight: bold;
float: left;
margin-right: 5px;
}
p::first-line {
color: blue; /* 段落首行变蓝色 */
}
3. 选中状态伪元素
::selection {
background: purple; /* 用户选中文本时的背景色 */
color: white; /* 用户选中文本时的文字颜色 */
}
4. 输入框占位符伪元素
input::placeholder {
color: #999; /* 输入框占位文本变灰色 */
font-style: italic;
}
六、选择器优先级：解决样式冲突
当多个选择器作用于同一元素时，优先级由高到低：
- 内联样式（如
<div style="color: red">） - ID 选择器（#id）
- 类 / 属性 / 伪类选择器（.class, [attr], :hover）
- 元素 / 伪元素选择器（p, ::before）
- 通配符（*）
记忆口诀：
- ID（最高） → Class → Element（最低），简称 ICE 原则。
- 相同优先级时，后定义的样式生效。
- !important 可强制提升优先级（但尽量避免使用）。
七、初学者常见误区
-
滥用 ID 选择器
ID 必须唯一，应优先使用类选择器实现复用。 -
过度嵌套选择器
避免深层后代选择器（如div ul li a），优先使用类直接定位。 -
忽略继承
颜色、字体等属性会自动继承，无需为每个元素重复定义。
八、实战练习：选择器应用场景
<!-- HTML 示例 -->
<header class="site-header">
<nav>
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">产品</a></li>
</ul>
</nav>
</header>
/* CSS 选择器示例 */
.site-header { background: #333; } /* 类选择器 */
nav ul { list-style: none; } /* 后代选择器 */
nav > ul > li { display: inline-block; } /* 子选择器 */
a.active { color: white; } /* 组合类选择器 */
总结：选择器是 CSS 的基石
通过系统学习选择器，你可以精准控制网页的每一个元素。建议结合实际项目练习，加深对不同选择器的理解和运用。
