CSS 核心知识与实战指南：选择器、样式规则及特性解析
CSS（层叠样式表）是构建网页样式的核心技术，它通过 "属性 - 值" 的键值对声明来控制 HTML 元素的呈现效果。本文将结合实际代码示例，详解 CSS 的基础概念、选择器体系、伪类伪元素及特殊特性。
一、CSS 基础概念
CSS 的核心组成包括：
- 声明：单个属性与值的键值对（如
color: red） - 声明块：多个声明的集合（用
{}包裹） - 选择器：用于指定声明块作用的 HTML 元素
- 样式表：由多个 CSS 规则（选择器 + 声明块）组成
/* 选择器 + 声明块 = CSS规则 */
p {
color: blue; /* 声明 */
font-size: 16px; /* 声明 */
}
二、CSS 选择器体系
选择器是 CSS 的灵魂，用于精确定位需要样式化的元素。
1. 基础选择器与优先级
CSS 选择器优先级遵循 "个十百千" 规则（从小到大）：
- 元素选择器（如
p）：1 - 类选择器（如
.container）：10 - ID 选择器（如
#main）：100 - 行内样式（
style属性）：1000 !important：最高优先级（谨慎使用）
示例（1.html） ：
<style>
p { color: blue; } /* 元素选择器：优先级1 */
.container p { color: red; } /* 类+元素：优先级10+1=11 */
#main p { color: green; } /* ID+元素：优先级100+1=101 */
</style>
<div id="main" class="container">
<p>这是一个段落</p> <!-- 最终显示绿色，因ID选择器优先级最高 -->
</div>
2. 关系选择器
用于选择存在特定关系的元素：
| 选择器 | 作用 |
|---|---|
A + B | 直接相邻选择器：选择 A 后紧邻的第一个 B |
A ~ B | 通用兄弟选择器：选择 A 后所有同层级的 B |
A > B | 子选择器：选择 A 的直接子元素 B |
A B | 后代选择器：选择 A 的所有后代元素 B |
示例（3.html） ：
h1 + p { color: red; } /* 仅h1后紧邻的p变红 */
p + p { color: green; } /* 紧接p后的p变绿 */
h1 ~ p { color: blue; } /* h1后所有同层级p变蓝（与上面规则冲突时按优先级） */
.container > p { color: pink; } /* .container的直接子p变粉 */
.container p { text-decoration: underline; } /* .container内所有p加下划线 */
3. 属性选择器
根据元素属性及属性值选择元素（2.html）：
/* 选择data-category为"科幻"的元素 */
[data-category="科幻"]{
background-color: #007bff;
color: white;
}
/* 选择data-category为"历史"的元素 */
[data-category="历史"]{
background-color: #8b4513;
color: #fffdd0;
}
4. 结构伪类
用于选择特定位置的元素，常用的有nth-child与nth-of-type（5.html）：
nth-child(n)：按父元素的所有子元素排序选择nth-of-type(n)：按同类型子元素排序选择
/* 选择.container中第5个子元素（无论类型），且该元素是p */
.container p:nth-child(5){
background-color: yellow;
}
/* 选择.container中第3个p类型子元素 */
.container p:nth-of-type(3){
background-color: yellow;
}
区别：若父元素中混合了不同类型元素（如 p、div），nth-child会计算所有子元素，而nth-of-type只计算同类型元素。
三、伪类与伪元素
1. 伪类
用于定义元素的特殊状态（4.html）：
button:active { /* 点击状态 */
background-color: red;
color: white;
}
p:hover { /* 悬浮状态 */
background-color: yellow;
}
::selection { /* 选中状态 */
background-color: blue;
color: white;
}
input:focus { /* 聚焦状态 */
border: 2px solid blue;
}
li:nth-child(odd) { /* 奇数项 */
background-color: lightgray;
}
2. 伪元素
用于创建不在 DOM 中的虚拟元素（6.html），以::开头：
.more::before { /* 元素前插入内容 */
content: ''; /* 必须有content属性 */
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: red;
transform: scaleX(0);
transition: transform .3s ease;
}
.more::after { /* 元素后插入内容 */
display: inline-block;
content: '\2192'; /* 右箭头符号 */
margin-left: 5px;
transition: transform .3s ease;
}
/* hover时的动画效果 */
.more:hover::before {
transform: scaleX(1); /* 下划线展开 */
}
.more:hover::after {
transform: translateX(5px); /* 箭头移动 */
}
四、CSS 特殊特性
- 层叠性：当多个样式规则作用于同一元素时，按优先级（前面提到的 "个十百千"）和源代码顺序（优先级相同时，后定义的生效）决定最终样式。
- margin 重叠：垂直方向上相邻的 margin 会发生重叠，最终取最大的 margin 值（而非相加）。
- 小数 px 处理：浏览器会对小数像素进行四舍五入或取整处理，不同浏览器可能有差异。
- inline 元素的 transform 限制：inline 元素默认不支持
transform属性，需将其转为inline-block或设置position: absolute才能生效。
五、样式引入方式与优先级
CSS 有三种引入方式，优先级从高到低为（7.html）：
- 行内样式（元素的
style属性） - 内嵌样式（
<style>标签内的样式） - 外联样式（
<link>引入的 CSS 文件）
<!-- 外联样式 -->
<link rel="stylesheet" href="theme.css">
<!-- 内嵌样式 -->
<style>
.btn { background: black; }
</style>
<!-- 行内样式（优先级最高） -->
<button class="btn" style="background: pink;">Click</button>
<!-- 最终按钮背景为粉色 -->
通过上述内容，我们可以系统掌握 CSS 的核心概念与实践技巧。合理运用选择器、伪类伪元素及样式优先级规则，能高效构建出丰富的网页样式。
