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 的奥秘！

相关推荐
_r0bin_31 分钟前
前端面试准备-7
开发语言·前端·javascript·fetch·跨域·class
IT瘾君32 分钟前
JavaWeb：前端工程化-Vue
前端·javascript·vue.js
zhang988000032 分钟前
JavaScript 核心原理深度解析-不停留于表面的VUE等的使用！
开发语言·javascript·vue.js
potender34 分钟前
前端框架Vue
前端·vue.js·前端框架
站在风口的猪11081 小时前
《前端面试题：CSS预处理器（Sass、Less等）》
前端·css·html·less·css3·sass·html5
程序员的世界你不懂2 小时前
(9)-Fiddler抓包-Fiddler如何设置捕获Https会话
前端·https·fiddler
MoFe12 小时前
【.net core】天地图坐标转换为高德地图坐标（WGS84 坐标转 GCJ02 坐标）
java·前端·.netcore
去旅行、在路上2 小时前
chrome使用手机调试触屏web
前端·chrome
Aphasia3113 小时前
模式验证库——zod
前端·react.js
lexiangqicheng3 小时前
es6+和css3新增的特性有哪些
前端·es6·css3
热门推荐
01基于STM32的智能电池管理系统02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06DeepSeek各版本说明与优缺点分析07VMware虚拟机安装Win7专业版保姆级教程（附镜像包）08wandb使用遇到的一些问题09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10ImageJ软件使用教程（二）：图像测量