引言
在前端开发的世界里，CSS 就像是一位神奇的魔法师，能够将平淡无奇的 HTML 页面变得绚丽多彩。而 CSS 选择器和伪类则是这位魔法师手中的魔法棒，通过它们可以精准地控制页面元素的样式。今天，就让我们一起深入探索 CSS 基础中的这些重要概念。
一、CSS 基础概念
声明（Declaration）
在 CSS 里，一个属性与值的键值对就被称为声明（declaration）。比如 color: red; ， color 是属性， red 是值，它们组成了一个声明。而一个声明块 {} 中可以包含多个这样的声明，像下面这样：
p {
color: red;
font-size: 16px;
}
选择器（Selector）
选择器决定了声明块作用于哪些元素。例如上面代码中的 p 就是选择器，它表示这些样式会应用到所有的p标签元素上。
二、CSS 选择器详解
<div class="container">
<p>标题之前</p>
<h1>标题</h1>
<p>第一段文字</p>
<p>第二段文字</p>
<a href="#">链接</a>
<span>这是一个span元素</span>
<div class="inner">
<p>这是内部段落</p>
</div>
</div>
效果图：
1.后代选择器
- 定义：通过空格分隔选择器，可选中某元素的所有后代元素。
.container p{
text-decoration: underline;
}
2.子代选择器
- 定义：使用
>连接，仅选中某元素的直接子元素。
/* 子代选择器 */
.container > p{
color:rgb(70, 255, 251);
}
3.兄弟选择器
- 兄弟选择器：用
+连接，选中某个元素的下一个相邻兄弟元素。 - 通用兄弟选择器：用
~连接，选中某个元素后面的所有同级兄弟元素。
/* 兄弟选择器(紧挨着) */
h1 + p {
color: green;
}
/* ~ 同级兄弟选择器 -- 选择所有位于 h1 元素之后的 p 元素 */
h1 ~ p{
color: red;
}
三、伪类选择器的魅力
1. 行为伪类
button:active：当鼠标点击按钮时，改变按钮的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
button:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<button>点击我</button>
</body>
</html>
p:hover：当鼠标悬浮在段落上时，改变文字样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p:hover {
color: red;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<p>鼠标悬浮试试</p>
</body>
</html>
2. 伪元素选择器
::selection：当用户选中文本时，改变选中文本的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
::selection {
background-color: yellow;
color: white;
}
</style>
</head>
<body>
<p>选我试试，看看效果</p>
</body>
</html>
3. 状态伪类
input:focus：当输入框获得焦点时，改变输入框的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input:focus {
outline: none;
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="text" placeholder="输入内容">
</body>
</html>
input:checked：当复选框被选中时，改变复选框和关联标签的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
input:checked {
background-color: green;
}
input:checked + label {
color: red;
font-weight: bold;
}
<input type="checkbox" id="option1">
<label for="option1">选项一</label>
</body>
</html>
4. 结构伪类
li:nth-child(odd)和li:nth-child(even)：分别为列表中的奇数项和偶数项设置不同的背景色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li:nth-child(odd) {
background-color: lightgray;
}
li:nth-child(even) {
background-color: rgb(214, 89, 228);
}
</style>
</head>
<body>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
<li>列表项 4</li>
</ul>
</body>
</html>
5. 条件伪类
li:not(:first-child)：为列表中除第一项外的其他项设置文字颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
li:not(:first-child) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</body>
</html>
四、 :nth-child() 与 :nth-of-type() 的区别
:nth-child()是按照父元素的所有子元素位置来选择的。:nth-of-type()是按照同类型元素的位置来选择。
下面是一个对比代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 对所有同级元素都进行排序。直接定位到div元素上，但只对p有效 */
.container p:nth-child(3) {
color: red;
}
/* 只对p类型生效排序 */
.container p:nth-of-type(3) {
color: rgb(30, 199, 232);
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="container">
<h1>标题</h1>
<p>第一个段落</p>
<div>这是一个 div</div>
<p>第二个段落</p>
<p>第三个段落</p>
</div>
</body>
</html>
总结
CSS 选择器和伪类是前端开发中非常重要的知识点，掌握它们可以让我们更加灵活地控制页面样式。通过今天的学习，希望大家对这些概念有了更深入的理解，并且能够在实际开发中熟练运用。让我们一起用 CSS 打造出更加美观、交互性更强的页面吧！
