四、CSS选择器（续）和三大特性
目录
1、分组选择器
2、伪类选择器
2.1、状态伪类选择器
1、链接伪类
2、用户行为伪类
2.2、结构伪类选择器
表格隔行变色效果案例
2.3、表单伪类选择器
3、伪元素选择器
4、属性选择器
5、CSS三大特性
1、分组选择器
是将不同的选择器组合在一起。使用逗号分割。也称为并集选择器。
使用场景：多个元素具备相同的样式。
语法：
元素1,
元素2 {color: pink;
}2、伪类选择器
选择元素的特定状态或结构位置，符号是冒号(:)。
- 状态伪类：根据用户交互或状态变化选择。比如：鼠标经过链接、
表单获得焦点等。
- 结构伪类：根据元素的位置选择。比如：选择第5个第10个元素、
选择前3个元素等。
- 表单伪类：针对表单元素的状态。比如：表单禁用、选中复选框等
2.1、状态伪类选择器
1、链接伪类
链接伪类用于根据链接（a标签）的不同状态（如未访问、悬停、点击等）为其添加样式，从而提升用户体验和界面交互性。
使用场景：设置链接的不同状态的样式。
| 链接伪类 | 作用 |
|---|---|
| a:link | 未访问链接的默认样式 |
| a:visited | 已访问的样式 |
| a:hover | 鼠标悬停在链接上时的反馈 |
| a:active | 链接被点击时的瞬时状态（鼠标左键点击不松开） |
伪类顺序规则（LVHA顺序）
a:link -> a:visited -> a:hover -> a:active
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>链接伪类选择器</title><style>/* 链接伪类 *//* 未访问的链接 *//* a {text-decoration: none;} *//* a:link {color: red;} *//* 已访问的链接 *//* a:visited {color: green;} *//* 鼠标悬停链接 *//* a:hover {color: blue;text-decoration: underline;} *//* 被点击的状态 *//* a:active {color: yellow;} *//* 一般开发我们这么写 */a {color: #000;text-decoration: none;}a:hover {color: red;text-decoration: underline;}</style>
</head><body><a href="https://www.baidu.com">跳转至百度</a><a href="https://www.sina.com.cn">跳转至新浪</a><a href="https://www.taobao.com">跳转至淘宝</a>
</body></html>2、用户行为伪类
用户以某种方式和文档交互的时候应用，这些用户行为伪类，有时叫做动态伪类。
使用场景：
1. 鼠标经过元素的时候，修改样式。
2. 表单获得焦点的时候。
| 动态伪类 | 作用 |
|---|---|
| :hover | 鼠标经过元素 |
| :focus | 获得焦点的元素（表单） |
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用户行为伪类</title><style>.box {width: 100px;height: 100px;background-color: pink;text-align: center;line-height: 100px;}/* :hover 鼠标悬停 *//* 选择器.box 和 :hover 中间不能有空格 */.box:hover {background-color: red;color: #fff;}.search {width: 100px;height: 20px;/* 过渡 *//* transform: .5s; */}/* :focus 获取焦点伪类 */.search:focus {width: 200px;background-color: red;}</style>
</head><body><div class="box">文字</div><input type="text" class="search">
</body></html>2.2、结构伪类选择器
根据元素的位置选择目标元素。
使用场景： 选择第1个或者最后一个或者第n个元素。
| 结构伪类 | 作用 |
|---|---|
| :first-child | 一组兄弟元素中的第一个元素 |
| :last-child | 一组兄弟元素中的最后一个元素 |
| :nth-child(n) | 一组兄弟元素列表中第n个元素 |
n的取值可以是：
- 数字：从1开始
- 关键字：odd（奇数）、even（偶数）
- 公式：:nth-child(3n) 3的倍数，第3.6.9...个元素；:nth-child(n+2) 第2个以及以后的元素；:nth-child(-n+3) 前面3个元素（注意公式的n取值从0开始计算）。
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器</title><style>/* 选择第一个小li */.ul1 li:first-child {color: red;}/* 选择最后一个小li */.ul1 li:last-child {color: blue;}/* 选择第n（3）个小li */.ul1 li:nth-child(3) {color: green;}/* 选择所有奇数小li */.ul2 li:nth-child(odd) {color: pink;}/* 选择所有偶数小li */.ul2 li:nth-child(even) {color: red;}/* 选择所有第n（3）个小li *//* .ul2 li:nth-child(3n) {color: blue;} *//* 选择所有第n（3）个小li 从第n个开始选择*//* .ul2 li:nth-child(n+3) {color: yellow;} */</style>
</head><body><ul class="ul1"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><ul class="ul2"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></body></html>表格隔行变色效果案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格隔行变色</title><style>* {margin: 0;padding: 0;}.data {/* 合并相邻边框 */border-collapse: collapse;/* 边框 1像素 实线 颜色 */border: 1px solid #f1f1f1;width: 400px;margin: 0 auto;/* 让表格里面的文字水平居中 */text-align: center;font-size: 14px;}.data tr {height: 35px;}/* 表格第一行 */.data tr:first-child {background-color: #8fbcf1 !important;color: #fff;}/* 让奇数行改为隔行变色 背景颜色 */.data tr:nth-child(odd) {background-color: #f9f9f9;}/* 鼠标经过 背景色 #f1f1f1 */.data tr:hover {background-color: #f1f1f1;}/* 第一行 背景色#8fbcf1; *//* 隔行变色 背景色 #f9f9f9 鼠标经过 背景色 #f1f1f1 */</style>
</head><body><table class="data"><tr><th>姓名</th><th>数据</th><th>日期</th></tr><tr><td>杨瀚森</td><td>10分</td><td>2025年7月12日</td></tr><tr><td>易建联</td><td>9分</td><td>2007年10月31日</td></tr><tr><td>王治郅</td><td>6分</td><td>2001年4月6日</td></tr><tr><td>孙悦</td><td>4分</td><td>2008年12月8日</td></tr><tr><td>周琦</td><td>2分</td><td>2018年10月31日</td></tr><tr><td>姚明</td><td>0分</td><td>2002年10月31日</td></tr><tr><td>崔永熙</td><td>1分</td><td>2024年10月28日</td></tr></body></html>
2.3、表单伪类选择器
针对表单元素的状态。
使用场景：
1. 表单按钮禁用的时候，调整颜色。
2. 复选框选中修改样式。
| 表单伪类 | 作用 |
|---|---|
| :disabled | 表单禁用 |
| :checked | 选中状态，单选复选按钮 |
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单伪类选择器</title><style>button {width: 150px;height: 40px;background-color: #ff6900;/* 去掉按钮默认的边框 */border: none;color: #fff;font-size: 14px;}/* 表单禁用伪类选择器 */button:disabled {/* background-color: #ccc; *//* 透明度：让整个按钮透明 0~1 */opacity: .4;}/* 表单被选择伪类选择器 */input:checked+label {color: #ff6900;}</style>
</head><body><button disabled>注册</button><br><input type="checkbox" id="agree"><label for="agree">同意注册协议</label>
</body></html>
3、伪元素选择器
选择元素的特定部分（使用双冒号 ::）
| 伪元素选择器 | 作用 |
|---|---|
| ::before | 元素内插入伪元素，作为第一个元素 |
| ::after | 元素内插入伪元素，作为最后一个元素 |
div::before {content: "开始";color: red;
}
div:after {content: "结束";color: red;
}
注意：
- before和after 是插入的 伪元素，特性类似内联元素。
- content 属性是必须，不能省略，没有内容空引号即可。
代码示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素选择器</title><style>/* 选择首行 */p::first-line {color: pink;}/* 选择首字母 */p::first-letter {font-size: 28px;color: #f00;}textarea {color: pink;font-size: 14px;}/* 选择选择框的占位符 */textarea::placeholder {color: red;font-size: 12px;}/* before 和 after 伪元素 */.box::before {content: '前';color: red;}.box::after {content: '后';color: red;}</style>
</head><body><p>伪元素选择器：1. 伪元素选择器是通过元素的特殊状态或位置来选择元素的。2. 伪元素选择器是通过元素的特殊状态来选择元素的。3. 伪元素选择器是通过元素的特殊状态来选择元素的。</p><textarea name="" id="" placeholder="请输入内容"></textarea><div class="box">pink</div>
</body></html>
4、属性选择器
根据元素的属性特征来精准定位元素，从而实现更灵活的样式控制。
使用场景：
1. 表单样式控制。
2. 图标字体控制。
3. 国际化语言适配等等。
| 属性选择器 | 作用 |
|---|---|
| [属性] | 匹配包含指定属性的元素 |
| [属性=值] | 匹配属性值等于指定值的元素 |
| [属性^=值] | 匹配属性值以指定字符串开头的元素 |
| [属性$=值] | 匹配属性值以指定字符串结尾的元素 |
| [属性*=值] | 匹配属性值任意位置包含指定字符串的元素 |
样例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>属性选择器</title><style>a {color: #000;text-decoration: none;}/* 属性选择器 *//* 1.选择包含属性 *//* a[class] {color: red;} *//* 2.选择属性等于值 完全匹配 *//* a[class="font"] {color: red;} *//* 3.选择属性值以xx开头 *//* a[class^="font"] {color: red;} *//* 4.选择属性以xx结尾 *//* a[class$="14"] {color: red;} *//* 5.选择属性包含xx *//* a[class*="16"] {color: red;} */input[type="text"],input[type="password"] {/* 选中后没有边框 去掉轮廓线 */outline: none;}</style>
</head><body><a href="#">修改文字颜色</a> <br><a href="#" class="font">修改文字颜色</a><br><a href="#" class="font14">修改文字颜色</a><br><a href="#" class="font16">修改文字颜色</a><br><a href="#" class="red">修改文字颜色</a> <br><input type="text"><br><input type="password"><br><input type="checkbox"><br><input type="radio">
</body></html>5、CSS三大特性
- 继承性：子元素继承父元素样式主要是跟文字相关的样式继承。
- 层叠性：后面样式会覆盖前面样式,主要解决样式冲突问题。但是要看选择器权重来确定优先级。
- 优先级：由选择器的权重决定，权重高的规则覆盖权重低的规则。
浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。 原则：
1. 优先级相等的时候，CSS 中最后的那个声明的样式将会被应用到元素上。（层叠遵循就近原则）。
2. 其余判断那个选择器权重高，优先执行那个样式。
3. 权重是4位一组，是分开的层级，不能进位。
| 选择器类型 | 权重值 | 优先级说明 |
|---|---|---|
| !important | 无限大 | 强制覆盖所有规则（慎用） |
| 内联样式 | (1, 0, 0, 0) | 行内样式权重最高 |
| ID 选择器 | (0, 1, 0, 0) | 每个 ID 增加 0,1,0,0 |
| 类/属性/伪类 | (0, 0, 1, 0) | 每个类/属性/伪类增加 0,0,1,0 |
| 类型（标签）/伪元素 | (0, 0, 0, 1) | 每个标签/伪元素增加 0,0,0,1 |
| 通配符/继承 | (0, 0, 0, 0) | 通配符和继承权重最低 |
浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。
权重叠加：
权重是累加的，每个选择器的层级权重相加。
