CSS 基础知识小课堂：从“选择器”到“声明块”，带你玩转网页的时尚穿搭！

我想说一句2025-06-06 10:26

🎯 一、引子：CSS 是网页的时尚设计师

想象一下，HTML 是一个人的骨架和器官，那么 CSS 就是这个人穿的衣服、发型、配饰。没有 CSS 的 HTML，就像一个穿着睡衣上街的人------虽然功能齐全，但看起来总有点不太得体。

今天，我们就来聊聊这个让网页变得"有颜值"的神奇语言：CSS（层叠样式表） 。它不仅是前端开发的"化妆师"，更是我们控制网页外观的超级武器！

🧠 二、基础概念扫盲班：什么是 CSS？

1. 声明（Declaration）：属性与值的 CP 组合

在 CSS 中，一个 声明（declearation）就是一组键值对，比如：

Css 复制代码 
color: red;
font-size: 20px;

这就好比你给衣服选颜色和尺码，color 是属性，red 是它的值；font-size 是属性，20px 是它的值。它们组合在一起，就是一个完整的"穿搭指令"。

2. 声明块（Declaration Block）：多个声明组成的集合

这些声明不是单打独斗的，而是被包裹在一个大括号 {} 里的，形成一个 声明块：

Css 复制代码 
{
  color: red;
  font-size: 20px;
}

这就像是一个完整的穿搭方案，包括了颜色、大小、字体等等所有风格细节。

3. 选择器（Selector）+ 声明块 = 规则集（Ruleset）

选择器决定了这个穿搭方案要应用在谁身上，声明块则是具体的穿搭内容。

Css 复制代码 
h1 {
  color: red;
  font-size: 20px;
}

这段代码的意思是："嘿，所有的 <h1> 标题元素，你们都给我穿上红色衣服，字号调成 20 像素。"

这就是一个完整的 规则集（ruleset） ，也就是我们常说的 CSS 样式规则。

就会修饰我们的html：

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>hello 大佬</h1>
</body>

</html>

🔍 三、CSS 选择器：精准定位你的"穿搭对象"

选择器就像是一个侦探，负责找到 HTML 页面中你想打扮的元素。不同的选择器可以让你更精确地找到目标。

1. 相邻兄弟选择器：h1 + p

Css 复制代码 
h1 + p {
  color: blue;
}

意思是："紧接在 <h1> 后面的那个 <p> 元素，你要变成蓝色。"

就像你在排队时只跟紧挨着你的人打招呼一样。

📌 比如：

Html 复制代码 
 <h1>我是标题</h1>
 <p>我是紧跟其后的段落</p>

这个段落会被选中。

是只与其紧挨，且只有一个

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1+p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>hello 大佬</h1>
    <p>段落1</p>
    <p>段落2</p>
</body>

</html>

2. 后续兄弟选择器：h1 ~ p

Css 复制代码 
h1 ~ p {
  color: green;
}

这次就不是只找第一个兄弟了，而是找所有在 <h1> 后面的 <p> 兄弟。

📌 示例：

Html 复制代码 
<h1>我是标题</h1>
<p>我也是段落</p>
<p>我也想变绿！</p>

这两个 <p> 都会被选中。 后续的兄弟元素(选中类型)都会被修饰

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1~p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <h1>hello 大佬</h1>
    <p>段落1</p>
    <p>段落2</p>
    <div>盒子1</div>
    <p>段落3</p>
</body>

</html>

3. 子元素选择器：div > p

css 复制代码 
div > p {
  background-color: yellow;
}

意思是："只要你是 <div> 的亲生孩子（直接子元素），而且你是一个 <p>，那就给你黄色背景。"

✅ 正确匹配：

html 复制代码 
<div>
  <p>我是 div 的儿子</p>
</div>

❌ 不匹配：

html 复制代码 
<div>
  <span><p>我不是亲生的</p></span>
</div>

我们来看看具体代码：一定要是指定的后代元素

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer>p {
            color: red;
            font-size: 20px;
        }

        .inner>p {
            color: blue;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <p>段落1</p>
        <div class="inner">
            <p>段落2</p>
        </div>
        <span>文字1</span>
    </div>
</body>

</html>

🦋 四、伪类选择器：为元素的状态"穿衣打扮"

有时候，我们不仅想根据元素的位置来打扮它，还想根据它的状态来调整样式。这时候就要用到 伪类选择器（Pseudo-classes）。

1. 行为伪类：用户正在做什么？

  • :hover：鼠标悬停
  • :active：点击瞬间
  • :focus：获得焦点（比如输入框被点击）
Css 复制代码 
button:hover {
  background-color: lightblue;
}

input:focus {
  border: 2px solid orange;
}

💡 小贴士：你可以把 :hover 理解成"靠近我我就换装"，:focus 是"被选中我就发光"。

我们来看具体实现

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button:active {
            background-color: red;
        }

        input:focus {
            background-color: yellow;
        }

        p:hover {
            background-color: blue;
        }
    </style>
</head>

<body>
    <button>点击我</button><br>
    <input type="text" placeholder="请输入">
    <p>一段文字</p>
</body>

</html>

点击按钮变成红色，聚焦输入框，背景颜色变成黄色，移动到p元素上面，背景颜色变成蓝色

2. 状态伪类：元素当前的状态

  • :checked：复选框或单选按钮被选中时
  • :enabled / :disabled：元素是否启用
Css 复制代码 
input:checked + label {
  color: purple;
}

📌 应用场景：当你选中某个选项时，对应的标签文字变成紫色，非常直观。

我们来看看具体实现

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:checked+label {
            color: red;
            font-weight: bold;
        }

        button:disabled {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <input type="checkbox">
    <label for="">选项</label><br>
    <button>点击我</button>
    <script>
        let btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            btn.disabled = true
        })
    </script>
</body>

</html>

我们添加了一个点击事件，点击后按钮就不可用了，我们css的修饰，按钮不可用就变成黄色，单选框被勾选label变成红色

3. 结构伪类：根据结构关系来选择元素

这部分是我们今天重点学习的内容之一，特别是 nth-child() 和 nth-of-type() 的区别。

✅ .container p:nth-child(3)：第 3 个孩子必须是 p 才行

Css 复制代码 
.container p:nth-child(3) {
  color: red;
}

📌 解释：

  • 容器 .container 中第 3 个子元素必须是 <p>，才会被选中。
  • 如果第 3 个是 <div> 或其他标签，就不会命中。

🧪 示例：

Html 复制代码 
<div class="container">
  <p>1</p>
  <div>2</div>
  <p>3</p> <!-- 会被选中 -->
</div>

✅ .container p:nth-of-type(3)：第 3 个 p 元素，不管它排第几

Css 复制代码 
.container p:nth-of-type(3) {
  color: blue;
}

📌 解释：

  • 只要是 .container 中的第 3 个 <p> 元素，无论它在整个容器中的位置如何，都会被选中。
  • 类似于"按类型排队"，不看整体顺序。

🧪 示例：

Html 复制代码 
<div class="container">
  <p>1</p>
  <div>2</div>
  <p>3</p> <!-- 第 2 个 p，不会被选中 -->
  <p>4</p> <!-- 第 3 个 p，会被选中 -->
</div>

🧠 对比记忆口诀：

  • .container p:nth-child：我只认"座位号"，必须坐那个位置。并且类型也要对
  • .container p:nth-of-type：我只认"类型+数量"，哪怕你坐在后排也无所谓。

🧩 五、进阶技巧：让选择器更强大

1. 属性选择器：根据属性来筛选

Css 复制代码 
input[type="text"] {
  width: 200px;
}

📌 说明：所有 type="text" 的输入框，宽度设为 200px。

2. 通配符选择器：*

Css 复制代码 
* {
  margin: 0;
  padding: 0;
}

⚠️ 注意：慎用，影响全局。

3. 分组选择器：多个选择器共享一套样式

Css 复制代码 
h1, h2, h3 {
  color: #333;
}

📌 效果：所有一级、二级、三级标题都使用深灰色字体。

🧵 六、总结：CSS 是一门优雅的语言

通过今天的学习，我们掌握了：

  • 声明、声明块、规则集的基本结构；
  • 多种选择器的使用方法；
  • 伪类选择器的作用及分类；
  • nth-child() 与 nth-of-type() 的区别；
  • 如何用 CSS 来为网页"穿衣打扮"。

结语：CSS 很有趣，也很值得深入研究！

CSS 并不只是写几个颜色和边距那么简单，它是构建现代网页视觉体验的重要基石。掌握好选择器，就像拥有一双能精准识别"穿搭对象"的眼睛，让你的网页美得恰到好处。

希望这篇轻松幽默的技术博客，能帮助你更好地回顾今天所学的内容。如果你觉得有用，不妨点赞收藏，下次继续带你看懂更多 CSS 的奥秘！

相关推荐
崔庆才丨静觅2 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了3 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅3 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅3 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅3 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment3 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅4 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊4 小时前
jwt介绍
前端
爱敲代码的小鱼4 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南