CSS选择器与样式关联

第一部分：CSS与HTML的关联方式

1.1 三种关联方式概述

方式	写法	特点	适用场景
行内样式	`<div style="color:red;">`	耦合度高，无法复用	单个元素的特殊样式
内部样式	`<style>` 标签内	仅当前页面生效	页面独有样式
外部样式	独立的 `.css` 文件	样式与HTML分离，便于维护复用	项目开发标准做法

老师强调：行内样式优先级最高，适合覆盖第三方样式；外部样式是实际开发中最常用的方式。

1.2 行内样式（内联样式）

直接在HTML元素的 style 属性中写入CSS代码。

复制代码

<div style="color: red; background-color: yellow;">
    这是一个红色文字、黄色背景的div
</div>

老师强调 ：这种方式样式与特定元素强绑定，耦合度极高，无法复用。项目中有多个页面风格相似时，相同的样式要重复写很多遍，效率极低。只适合针对单个元素的特殊样式需求。

1.3 内部样式表

在HTML文档的 <head> 部分使用 <style> 标签编写CSS代码。

复制代码

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
            background: yellow;
        }
    </style>
</head>
<body>
    <p>这段文字会应用样式</p>
    <p>这段也会应用相同的样式</p>
</body>
</html>

老师强调：内部样式表让同一页面里的多个元素共享一套样式，就像给全班同学发统一校服，比每人单独定制省事多了。但作用范围仅限于当前文件，适合页面独有的样式。

1.4 外部样式表

创建一个独立的 .css 文件，通过 <link> 标签引入。

CSS文件（style.css）：

复制代码

p {
    color: red;
    background: yellow;
}

HTML文件：

复制代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>这段文字应用外部样式</p>
</body>
</html>

老师强调 ：外部样式将样式与HTML分离，便于维护和复用，是项目开发的标准做法。相对路径 vs 绝对路径 ：./css/style.css（相对）比 C:/project/css/style.css（绝对）更常用，因为本地和服务器的路径可能不同。

1.5 路径规则速查

写法	含义	类比
`style.css`	同级目录	同一个教室里直接找人
`./style.css`	同级目录（明确表示）	同上
`css/style.css`	进入子目录	去某个房间找
`../style.css`	返回上级目录	先出教室再找

老师强调 ：../ 相当于"往回走一步"，/ 相当于"往某个房间走"。

1.6 三种方式优先级

复制代码

行内样式 > 内部样式 = 外部样式（后者取决于定义顺序）

优先级	方式	说明
最高	行内样式	直接写在元素上，最具体
中等	内部样式 / 外部样式	谁后定义谁生效（层叠特性）

老师强调 ：当多个CSS文件对同一个元素设置样式时，不同属性会叠加生效 （同时设置背景色和字体大小），相同属性则根据优先级覆盖（后定义的覆盖前面的）。这就是"层叠"的含义。

第二部分：CSS选择器

2.1 选择器的作用

老师强调 ：网页由很多元素组成，选择器的作用就是精准定位到需要添加样式的元素。这就像在一群人里找到你要找的那个人。选择器不仅用于CSS，后续JavaScript中操作DOM元素时也同样重要。

2.2 CSS语法规则

复制代码

选择器 {
    属性: 值;
    属性: 值;
}

老师强调：CSS语法比C/Java等编程语言简单得多，核心逻辑就是"选中 → 设置"。

2.3 基本选择器

2.3.1 元素选择器

通过标签名直接选中对应元素。

复制代码

p {
    color: red;
    background: yellow;
}

<p>段落文字变为红字黄底</p>
<div>div不受影响</div>

老师强调 ：元素选择器的局限是会选中页面中所有同类型标签。如果页面上有多个div，而我们只想选中其中一个，单纯用元素选择器就无法满足需求了。

2.3.2 ID选择器

通过元素的 id 属性定位，用 # 表示。

复制代码

#aa {
    color: red;
    background: yellow;
}

<p id="aa">这个p标签有id="aa"</p>
<p>这个p标签没有id</p>

老师强调 ：id 就像人的身份证号，具有唯一性 。但CSS实际上并不会强制检查id的唯一性------即使有多个相同id，CSS仍会匹配所有。但在JavaScript中，只会选择第一个匹配的id元素。最佳实践：自觉保持id的唯一性。

2.3.3 Class选择器

通过元素的 class 属性定位，用 . 表示。

复制代码

.aa {
    color: red;
    background: yellow;
}

<p class="aa">这个p标签有class="aa"</p>
<div class="aa">这个div也有class="aa"</div>

老师强调 ：class 就像对元素进行分类，比如把不同的人分为"男生""女生"。id用于唯一标识单个元素，class用于分类多个元素。 需要重复使用相同样式时，应该用class选择器。

2.3.4 属性选择器

通过元素的属性及其值来定位，用 [] 表示。

写法	含义	示例
`[id]`	只要有id属性就选中	所有带id的元素
`[id="aa"]`	精确匹配id="aa"	完全等于aa
`[id^="aa"]`	以"aa"开头	aa, aa123, aaabc
`[id$="aa"]`	以"aa"结尾	123aa, bcaa
`[id*="aa"]`	包含"aa"	123aa456, baa

复制代码

/* 选中所有带id属性的元素 */
[id] {
    color: red;
    background: yellow;
}

/* 选中id以"aa"开头的元素 */
[id^="aa"] {
    color: red;
    background: yellow;
}

<!-- 都会被选中 -->
<div id="aa">精确匹配</div>
<div id="aa123">以aa开头</div>
<div id="123aa">以aa结尾</div>
<div id="123aa456">包含aa</div>
<div>无id属性，不被选中</div>

老师强调 ：[id] 会选中所有具有该属性的元素，不管属性值是什么。属性选择器不仅适用于标准属性（id、class、href），也适用于自定义属性。

2.3.5 结合选择器（多条件同时满足）

将多个选择器紧挨着写，表示"既要...又要..."。

复制代码

/* 既要p标签，又要class="aa" */
p.aa {
    color: red;
    background: yellow;
}

/* 既要div标签，又要id="app" */
div#app {
    color: red;
    background: yellow;
}

<p class="aa">p标签且class="aa" → 被选中 ✅</p>
<div class="aa">div标签且class="aa" → 不被选中 </div>

老师强调 ：选择器紧挨着写不能加空格 ------p.aa 表示"既是p标签又有a类"，而 p .aa（带空格）表示"p标签下的a类子元素"，含义完全不同！

2.4 包含选择器（后代选择器）

用空格表示，选中指定元素的所有后代元素（不限层级）。

复制代码

/* div内部所有层级的p标签都会被选中 */
div p {
    color: red;
    background: yellow;
}

<div>
    <p>直接子元素 → 被选中 ✅</p>
    <span>
        <p>嵌套在span里的p → 也被选中 ✅</p>
    </span>
</div>
<p>div外部的p → 不被选中 </p>

老师强调：包含选择器通过"父元素子元素"的写法（注意中间的空格），能借助父级元素来区分子元素，避免给每个元素都加class，保持代码简洁。

2.5 子选择器

用 > 表示，只选中直接子元素。

复制代码

/* 只选中div的直接子元素p */
div>p {
    color: red;
    background: yellow;
}

<div>
    <p>直接子元素 → 被选中 ✅</p>
    <span>
        <p>嵌套在span里的p → 不被选中 </p>
    </span>
</div>

老师强调 ：后代选择器（空格）和子选择器（>）的关键区别：空格选中所有层级 的后代，> 只选中直接子元素。写子选择器时要让 > 紧挨着两边元素，如 div>p，不能随意加空格。

2.6 选择器组合（分组）

用逗号 , 表示"或"的关系，多个选择器共享同一套样式。

复制代码

/* 所有div、span、a、p，以及div内部的h3都应用此样式 */
div,
span,
a,
p,
div h3 {
    color: red;
    background: yellow;
}

<div>div被选中 ✅</div>
<span>span被选中 ✅</span>
<p>p被选中 ✅</p>
<div><h3>div内的h3被选中 ✅</h3></div>

老师强调：选择器之间用逗号隔开表示"或"的关系，只要元素匹配其中任意一个选择器，就会应用对应的样式。这就像数学中提取公共部分，把相同的样式提取出来，不同的部分用逗号隔开。

2.7 通配符选择器

用 * 表示，选中页面上的所有元素。

复制代码

* {
    color: red;
    background: yellow;
}

老师强调 ：* 会匹配页面上的所有元素。在框架设计中，通常不会放像背景这样显眼的样式，而是放每个元素都必需的基础属性（如填充度、间距等）。

2.8 基本选择器总结

选择器	语法	示例	特点
元素选择器	`标签名`	`p`	选中所有该标签
ID选择器	`#id值`	`#aa`	唯一标识
Class选择器	`.类名`	`.aa`	可重复使用
属性选择器	`[属性]`	`[id]`	按属性筛选
属性精确匹配	`[属性="值"]`	`[id="aa"]`	完全相等
属性开头匹配	`[属性^="值"]`	`[id^="aa"]`	以某值开头
属性结尾匹配	`[属性$="值"]`	`[id$="aa"]`	以某值结尾
属性包含匹配	`[属性*="值"]`	`[id*="aa"]`	包含某值
结合选择器	`选择器1选择器2`	`p.aa`	同时满足（无空格）
包含选择器	`选择器1 选择器2`	`div p`	所有后代（有空格）
子选择器	`选择器1>选择器2`	`div>p`	直接子元素
组合选择器	`选择器1,选择器2`	`div,span`	或的关系
通配符	`*`	`*`	所有元素

第三部分：伪元素选择器

3.1 什么是伪元素

老师强调 ：伪元素是"假"的元素，不用修改HTML结构就能添加视觉效果。就像给书本首字母画装饰，但不需要真的把那个字母剪下来处理。伪元素生成的内容默认是行内元素。

3.2 `::first-letter` ------ 首字母

选中块级元素的第一个字符。

复制代码

div::first-letter {
    color: red;
    background: yellow;
    font-size: 50px;
}

<div>这是一个div，首字母会特别大且变色</div>

老师强调 ：::first-letter 只能作用于块级元素 （独占一行的元素），span 等行内元素无法使用。

3.3 `::first-line` ------ 首行

选中块级元素的第一行。

复制代码

div::first-line {
    color: red;
    background: yellow;
    font-size: 50px;
}

<div>这是第一行文字<br>这是第二行文字</div>

老师强调：中文排版时要注意标点符号的处理，中文逗号、句号会作为行内元素影响首行样式的计算。

3.4 `::before` 与 `::after` ------ 前后插入

在元素内容的前面（before）或后面（after）插入内容。

复制代码

div::before {
    content: "hello";
    background: skyblue;
    font-size: 60px;
}

div::after {
    content: "hello123";
    background: gold;
    font-size: 60px;
}

<div>这是div的正文</div>

老师强调 ：content 属性必须显式声明 ，即使只需要创建视觉效果而不显示文本内容，也要写成 content:"" 来占位，否则伪元素不会生效。::before 和 ::after 的用法完全一致，只是一个在前面插入，一个在后面插入。

3.5 伪元素总结

伪元素	作用	必须属性
`::first-letter`	选中首字母	无
`::first-line`	选中首行	无
`::before`	在元素前插入内容	`content`
`::after`	在元素后插入内容	`content`

第四部分：伪类选择器

4.1 什么是伪类

老师强调 ：伪类选择器给已有元素添加特定状态 时的样式。比如鼠标悬停（:hover）、输入框获得焦点（:focus）等。伪类能让我们在不修改HTML结构的情况下，精准控制元素在不同状态下的样式。

4.2 结构性伪类选择器

4.2.1 `:nth-child()`

根据数字位置选择子元素，不管元素类型。

写法	含义	示例
`:nth-child(3)`	第3个子元素	从1开始计数
`:nth-child(odd)`	奇数位子元素	1, 3, 5, ...
`:nth-child(even)`	偶数位子元素	2, 4, 6, ...
`:nth-child(2n+1)`	奇数位（n从0开始）	1, 3, 5, ...
`:nth-child(3n-3)`	第3、6、9...个	n=1→0（无效），n=2→3

复制代码

ul li:nth-child(2) {
    background: gold;
}

<ul>
    <li>第1个 → 不变</li>
    <li>第2个 → 金色背景 ✅</li>
    <li>第3个 → 不变</li>
</ul>

老师强调 ：:nth-child() 非常"死板"------它只会机械地按照数字顺序查找子元素。比如 ul li:nth-child(1) 选中的是ul下的第一个子元素，不管这个子元素是不是li标签。实际开发中不建议混用不同类型的子元素。

4.2.2 `:nth-of-type()`

先筛选同类型元素，再按位置选择。

复制代码

ul li:first-of-type {
    background: gold;
}

<ul>
    <p>p标签（第一个子元素）→ 不影响</p>
    <li>第一个li → 金色背景 ✅</li>
    <li>第二个li → 不变</li>
</ul>

老师强调 ：:nth-of-type() 是"同类型下的第几个"。当ul里混着li和p标签时，用 :nth-of-type(odd) 选li的奇数位时，p标签完全不影响计数。这个选择器比 :nth-child() 更智能，适合在重复性高的元素上使用。

4.2.3 常用结构性伪类速查

伪类	说明
`:first-child`	第一个子元素
`:last-child`	最后一个子元素
`:nth-child(n)`	第n个子元素
`:nth-last-child(n)`	倒数第n个子元素
`:first-of-type`	同类型中的第一个
`:last-of-type`	同类型中的最后一个
`:nth-of-type(n)`	同类型中的第n个
`:nth-last-of-type(n)`	同类型中的倒数第n个

4.3 UI状态伪类选择器

4.3.1 `:hover` ------ 悬停状态

鼠标悬停时触发。

复制代码

ul li:hover {
    background: gold;
}

<li>鼠标悬停在我身上 → 变金色</li>

老师强调 ：:hover 是实现网页交互效果的利器，鼠标划过时图片放大、按钮变色、星空背景特效等，很多都是用 :hover 实现的。能让网页从静态变动态。

4.3.2 `:focus` ------ 焦点状态

输入框获得焦点（被点击准备输入）时触发。

复制代码

input:focus {
    background: gold;
}

<input type="text" placeholder="点击我获得焦点">

老师强调：焦点状态主要用在输入框上，提示用户当前处于可输入状态。

4.3.3 `:checked` ------ 选中状态

单选/复选框被选中时触发。

复制代码

input:checked {
    box-shadow: 5px 10px 5px gold;
}

<input type="checkbox"> 选中我试试

老师强调：阴影的X轴偏移量表示向右移动，Y轴偏移量表示向下移动，符合前端坐标系（X轴正方向向右，Y轴正方向向下）。

第五部分：选择器优先级

5.1 优先级规则

老师强调：当多个CSS选择器同时选中同一个元素时，样式效果的处理规则：

不同样式属性 → 叠加生效

相同样式属性 → 根据优先级决定

5.2 优先级顺序

复制代码

!important > 行内样式 > ID选择器 > Class选择器 > 元素选择器 > 通配符

具体规则：

选择器写得越具体/越长，优先级越高
同级别下：ID > Class > 元素选择器

选择器	优先级	示例
行内样式	最高	`<div style="color:red;">`
`#id`	高	`#header`
`.class`	中	`.menu`
`标签`	低	`div`
`*`	最低	通配符

老师强调 ：#header 的优先级比 .menu 高，.menu 又比 div 高。就像"带着父亲一起去找人"会更准确。

5.3 层叠特性（Cascading）

复制代码

/* 先定义 */
p { color: red; }

/* 后定义 --- 覆盖前面的相同属性 */
p { color: blue; }   /* 最终文字为蓝色 */

老师强调 ：当选择器优先级相同时，后写的样式会覆盖前面的同名样式 ，这就是"层叠样式表"（Cascading Style Sheets）的核心特性。只有相同属性才会被覆盖，不同属性会叠加生效。

5.4 优先级示例对比

复制代码

<!-- 同一个元素被多个选择器选中 -->
<div id="app" class="box" style="color: green;">测试文字</div>

选择器	最终生效
`#app { color: red; }` + `.box { color: blue; }`	红色（ID > Class）
`.box { color: blue; }` + `div { color: yellow; }`	蓝色（Class > 元素）
行内 `color: green` + `#app { color: red; }`	绿色（行内 > ID）
`#app { color: red; }` + `#app { color: blue; }`	蓝色（后者覆盖前者）

5.5 调试技巧

老师强调：样式不生效时，按以下步骤排查：

检查是否有冲突样式被覆盖

检查是否有更高优先级的选择器在起作用

通过浏览器开发者工具（F12）查看最终生效的样式，包括浏览器默认样式和自定义样式

附录一：全部选择器速查表

基本选择器

选择器	语法	示例	说明
元素选择器	`标签名`	`p`	所有p标签
ID选择器	`#id值`	`#aa`	id="aa"的元素
Class选择器	`.类名`	`.aa`	class="aa"的元素
属性选择器	`[属性]`	`[id]`	有id属性的元素
属性精确匹配	`[属性="值"]`	`[id="aa"]`	id="aa"
属性开头匹配	`[属性^="值"]`	`[id^="aa"]`	id以"aa"开头
属性结尾匹配	`[属性$="值"]`	`[id$="aa"]`	id以"aa"结尾
属性包含匹配	`[属性*="值"]`	`[id*="aa"]`	id包含"aa"
结合选择器	`选择器1选择器2`	`p.aa`	既是p又有class=aa
包含选择器	`选择器1 选择器2`	`div p`	div内所有p（不限层级）
子选择器	`选择器1>选择器2`	`div>p`	div的直接子元素p
组合选择器	`选择器1,选择器2`	`div,span`	div或span
通配符	`*`	`*`	所有元素

伪元素选择器

伪元素	语法	说明	必须属性
首字母	`::first-letter`	块级元素的首字符	无
首行	`::first-line`	块级元素的首行	无
前插入	`::before`	元素前插入内容	`content`
后插入	`::after`	元素后插入内容	`content`

伪类选择器

伪类	语法	说明
第n个子元素	`:nth-child(n)`	按数字位置，不管类型
第n个同类元素	`:nth-of-type(n)`	先筛类型，再按位置
第一个子元素	`:first-child`	同 `:nth-child(1)`
最后一个子元素	`:last-child`	同 `:nth-last-child(1)`
第一个同类元素	`:first-of-type`	同 `:nth-of-type(1)`
最后一个同类元素	`:last-of-type`	同 `:nth-last-of-type(1)`
悬停状态	`:hover`	鼠标悬停时
焦点状态	`:focus`	输入框获得焦点
选中状态	`:checked`	复选框/单选框被选中

老师总结：CSS选择器的核心就是"选中-设置"两步。掌握基本选择器后，伪类和伪元素让选择更精准。优先级规则记住两点：1) 越具体越高；2) ID > class > 元素。多练习，样式不生效时用浏览器开发者工具（F12）查看最终生效的样式，这是最有效的调试方式。

CSS选择器与样式关联

第一部分：CSS与HTML的关联方式

1.1 三种关联方式概述

1.2 行内样式（内联样式）

1.3 内部样式表

1.4 外部样式表

1.5 路径规则速查

1.6 三种方式优先级

第二部分：CSS选择器

2.1 选择器的作用

2.2 CSS语法规则

2.3 基本选择器

2.3.1 元素选择器

2.3.2 ID选择器

2.3.3 Class选择器

2.3.4 属性选择器

2.3.5 结合选择器（多条件同时满足）

2.4 包含选择器（后代选择器）

2.5 子选择器

2.6 选择器组合（分组）

2.7 通配符选择器

2.8 基本选择器总结

第三部分：伪元素选择器

3.1 什么是伪元素

3.2 ::first-letter ------ 首字母

3.3 ::first-line ------ 首行

3.4 ::before 与 ::after ------ 前后插入

3.5 伪元素总结

第四部分：伪类选择器

4.1 什么是伪类

4.2 结构性伪类选择器

4.2.1 :nth-child()

4.2.2 :nth-of-type()

4.2.3 常用结构性伪类速查

4.3 UI状态伪类选择器

4.3.1 :hover ------ 悬停状态

4.3.2 :focus ------ 焦点状态

4.3.3 :checked ------ 选中状态

第五部分：选择器优先级

5.1 优先级规则

5.2 优先级顺序

5.3 层叠特性（Cascading）

5.4 优先级示例对比

5.5 调试技巧

附录一：全部选择器速查表

基本选择器

伪元素选择器

伪类选择器

3.2 `::first-letter` ------ 首字母

3.3 `::first-line` ------ 首行

3.4 `::before` 与 `::after` ------ 前后插入

4.2.1 `:nth-child()`

4.2.2 `:nth-of-type()`

4.3.1 `:hover` ------ 悬停状态

4.3.2 `:focus` ------ 焦点状态

4.3.3 `:checked` ------ 选中状态