8.CSS选择器全解析：基础+复合+伪类，一篇搞懂网页样式控制
目录
一、选择器的种类
二、类选择器
代码示例1：基础类选择器使用
代码示例2：类选择器样式叠加（.eat、.sleep、.game）
代码示例3：类选择器叠加样式（.play）
三、id 选择器
代码示例4：基础 id 选择器使用
代码示例5：id 选择器多元素使用（fe、server）
四、通配符选择器
代码示例6：基础通配符选择器使用
实际应用：消除默认边距
五、复合选择器（选学）
1. 后代选择器
2. 什么是复合选择器
代码示例7：后代选择器实战（ul、li 变红）
代码示例8：后代选择器进阶（.hobby li、li a）
六、伪类选择器
1) 链接伪类选择器
什么是伪类选择器
代码示例9：链接伪类实战（颜色变化）
代码示例10：输入框伪类实战（颜色变化）
一、选择器的种类
以下内容只是 CSS2 标准中支持的选择器，在 CSS3 中还做出了一些补充，咱们后面再说。
基础选择器：单个选择器构成的
标签选择器
类选择器
id 选择器
通配符选择器
复合选择器：把多种基础选择器综合运用起来。
后代选择器
子选择器
并集选择器
伪类选择器
参考文档：CSS 选择器参考手册
二、类选择器
特点：
差异化表示不同的标签
可以让多个标签都使用同一个标签
代码示例1：基础类选择器使用
<style> .blue { color: blue; } </style> <div class="blue">咬人猫</div> <div>咬人猫</div>代码示例2：类选择器样式叠加（.eat、.sleep、.game）
CSS 文件（demo03.css）：
.eat { color: red; } .sleep { color: green; } .game { color: blue; }HTML 文件（demo03.html）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./demo03.css"> </head> <body> <p class="eat">吃饭 <p class="sleep">睡觉 <p class="game">玩游戏 </body> </html>代码示例3：类选择器叠加样式（.play）
CSS 文件（demo03.css）追加：
.play { font-size: 80px; }HTML 文件（demo03.html）追加：
<p class="play game">玩游戏三、id 选择器
和类选择器类似，但有以下区别：
CSS 中使用
#开头表示 id 选择器id 选择器的值和 html 中某个元素的 id 值相同
id 是唯一的，不能被多个标签使用（是和类选择器最大的区别）
代码示例4：基础 id 选择器使用
<style> #ha { color: red; } </style> <div id="ha">哈哈哈</div>代码示例5：id 选择器多元素使用（fe、server）
CSS 文件（demo04.css）：
#fe { color: red; } #server { color: green; }HTML 文件（demo04.html）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./demo04.css"> </head> <body> <p id="fe">前端开发 <p id="server">后端开发 </body> </html>⚠️ 一个页面如果出现了重复的 id 就会报错
四、通配符选择器
使用*的定义，选取所有的标签。
代码示例6：基础通配符选择器使用
* { color: red; }页面的所有内容都会被改成红色，不需要被页面结构调用。
实际应用：消除默认边距
通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距。
HTML 文件（demo04.html）：
<div id="hahaha">哈哈哈哈哈</div> <div id="fe">前端开发</div>CSS 文件（demo04.css）追加：
#hahaha { color: brown; } * { background-color: beige; }五、复合选择器（选学）
1. 后代选择器
又叫包含选择器，选择某个父元素中的某个子元素。
语法：元素1 元素2 {样式声明}
元素 1 和元素 2 要使用空格分割
元素 1 是父级，元素 2 是子级，只选元素 2，不影响元素 1
2. 什么是复合选择器
将之前学习的基础选择器进行组合
代码示例7：后代选择器实战（ul、li 变红）
CSS 文件：
/* 方式1：直接选 li */ li { color: red; } /* 方式2：选 .red 类 */ .red { color: red; } /* 方式3 */ ol li { color: red; }HTML 文件：
<ul> <li>吃饭</li> <li>吃饭</li> <li>吃饭</li> </ul> <ol> <li class="red">吃饭</li> <li class="red">吃饭</li> <li class="red">吃饭</li> </ol>代码示例8：后代选择器进阶（.hobby li、li a）
CSS 文件：
.hobby li { color: red; } li a { color: red; }HTML 文件：
<ul> <li>吃饭</li> <li>吃饭</li> <li>吃饭</li> </ul> <ol class="hobby"> <li>吃饭</li> <li class="red">吃饭</li> <li class="red">吃饭</li> <li> <a href="#">吃饭</a> </li> </ol>六、伪类选择器
1) 链接伪类选择器
a:link：选择未被访问过的链接a:visited：选择已经被访问过的链接a:hover：选择鼠标指针悬停上的链接a:active：选择活动链接（鼠标按下了但是未弹起）
什么是伪类选择器
用来定义元素状态的
代码示例9：链接伪类实战（颜色变化）
CSS 文件：
a { color: black; } a:hover { color: red; } a:active { color: green; }HTML 文件：
<a href="#">不跳转</a>代码示例10：输入框伪类实战（颜色变化）
CSS 文件：
input { color: blue; } input:hover { color: red; } input:active { color: green; }HTML 文件：
<input type="button" value="按钮">