「一文吃透」CSS 选择器与伪类，前端样式基础全掌握！本文系统梳理了 CSS 基础概念、常用选择器及伪类选择器的用法，通

CSS（Cascading Style Sheets，层叠样式表）是前端开发中不可或缺的技术之一。它通过为 HTML 元素添加样式，使网页变得美观且易于维护。本文将系统梳理 CSS 的基础知识、常用选择器及伪类选择器的实际应用，帮助你打下坚实的 CSS 基础。

一、CSS 基础概念

声明（Declaration）：CSS 的基本单位，由属性（property）和值（value）组成，如 color: red;。
声明块（Declaration Block）：用 {} 包裹的一组声明，可以包含多个属性和值。
选择器（Selector）：用于选中需要应用样式的 HTML 元素。
规则集（Ruleset）：由选择器和声明块组成的一条完整 CSS 规则。

示例：

p {
    color: blue;
}

上述代码中，p 是选择器，color: blue; 是声明。

二、选择器的优先级与层叠

CSS 具有“层叠”特性，不同选择器的优先级不同，后写的规则会覆盖前面的规则。优先级从低到高依次为：标签选择器 < 类选择器 < ID 选择器 < 行内样式。

示例：

p {
    color: blue;
}
.container p {
    color: red;
}
#main p {
    color: green;
}

普通 p 标签为蓝色
.container 下的 p 标签为红色
#main 下的 p 标签为绿色（优先级最高）

三、常用选择器

1. 兄弟选择器

相邻兄弟选择器（+）：选中紧挨着的同级元素。
通用兄弟选择器（~）：选中同级中位于指定元素之后的所有元素。

示例:

h1 + p {
    color: red;
}
h1 ~ p {
    color: blue;
}

h1 + p 选中紧跟在 h1 后的第一个 p
h1 ~ p 选中 h1 后所有的 p

2. 子元素选择器

直接子元素选择器（>）：选中父元素下的直接子元素。

.container > p {
    font-weight: bold;
}

选中 .container 下所有直接子元素 p，加粗字体。

3. 后代选择器

后代选择器（空格）：选中某元素下所有指定类型的后代元素。

.container p {
    text-decoration: underline;
}

选中 .container 下所有 p 元素，加下划线。

四、伪类选择器

伪类选择器用于定义元素的特殊状态，如鼠标悬停、选中、聚焦等。

1. 行为伪类

button.active {
    background-color: red;
    color: white;
}
p:hover {
    background-color: yellow;
}
::selection {
    background-color: blue;
    color: white;
}

.active 类的按钮为红底白字
鼠标悬停在 p 上时背景变黄
选中文本时背景变蓝、字变白

2. 状态伪类

input:focus {
    border: 2px solid rgb(122, 2, 2);
}
input:checked + label {
    font-weight: bold;
}

输入框聚焦时边框变色
被选中的复选框对应的 label 加粗

3. 条件伪类

li:not(:last-child) {
    margin-bottom: 10px;
}

除了最后一个 li，其余 li 底部有间距

五、结构伪类选择器

结构伪类选择器用于选中特定结构位置的元素，如第几个子元素、奇偶数等。

1. `:nth-child` 与 `:nth-of-type`

li:nth-child(odd) {
    background-color: red;
}
li:nth-child(even) {
    background-color: blue;
}

奇数序号的 li 背景为红色，偶数为蓝色

更复杂的结构：

.container :nth-child(3) {
    background-color: red;
    color: black;
}
.container p:nth-of-type(3) {
    background-color: blue;
    color: white;
}

.container :nth-child(3) 选中 .container 下的第三个子元素（不论类型）
.container p:nth-of-type(3) 选中 .container 下第三个 p 元素

2. 结构伪类实际应用

HTML 结构示例：

<div class="container">
    <h1>nth-child vs nth-of-type</h1>
    <p>这是一个段落</p>
    <div>这是一个div</div>
    <p>这是第二个段落</p>
    <p>这是第三个段落</p>
    <div>这是第二个div</div>
</div>

:nth-child(3) 选中第三个子元素（即第一个 <div>）
p:nth-of-type(3) 选中第三个 <p>（即“这是第三个段落”）
p:nth-child(3)选中父元素下第三个子元素，且这个子元素必须是
标签时才会被选中。

六、总结

本文梳理了 CSS 的基础概念、常用选择器、伪类选择器及结构伪类的实际用法。掌握这些内容后，你可以灵活地为页面元素添加样式，实现丰富的页面效果。建议多动手实践，结合实际项目不断巩固和提升 CSS 技能。

希望这篇文章能帮助你更好地理解和应用 CSS 选择器！

「一文吃透」CSS 选择器与伪类，前端样式基础全掌握！