🔎这里是【前端网页】，关注我学习前端不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS进阶之复合选择器
文章目录
1.概述
2.包含选择器
1.1 概述及格式
1.2 案例代码
3.子对象选择器
1.2 概述及格式
1.3. 案例代码
4.并集选择器
1.1 概述及格式
1.2. 案例代码
5.伪类选择器
1.1 概述及格式
1.2 链接伪类：常见 API 及案例代码
1.3 结构伪类：示例代码
1.4 伪类和伪元素的区别（了解）
6.总结
1.概述
复合选择器：多个基本选择器的组合使用形式。
作用：更准确、更高效地选择目标元素（标签）。
常用的复合选择器：包含选择器、子对象选择器、并集选择器、伪类选择器
2.包含选择器
1.1 概述及格式
包含选择器又名后代选择器。
指标签和标签之间有 包含 关系（父子、爷孙都是包含），例如： <html> 标签包含了 <body> 标签。
我们可以对基本选择器进行组合，表现出包含关系，从而更加针对性地把样式作用于某些标签上。
格式：
选择器 1 选择器 2 …..{
/*css 样式代码 */
}
意思为：搜索选择器 1 下的所有的 选择器 2
1.2 案例代码
准备代码：仅要求 div 下所有的 font 标签变为红色，其他颜色黑色
<div>
<span>
<font>变为红色字体 111</font>
</span>
<font>变为红色字体 222</font>
黑色字体 111
</div>
<font>黑色字体 222</font>
示例：
效果：
3.子对象选择器
1.2 概述及格式
标签和标签之间有 父子 关系，例如： <body> 标签的父标签为 <html> 标签。
我们可以对基本选择器进行组合，表现出父子关系
格式：
选择器 1> 选择器 2 …..{
/*css 样式代码 */
}
意思为：搜索选择器 1 下的所有的子标签 选择器 2
1.3. 案例代码
准备代码：仅要求 div 下所有 font 子标签变为红色，其他颜色黑色
<div>
<span>
<font>黑色字体 111</font>
</span>
<font>变为红色字体 111</font>
黑色字体 222
</div>
<font>黑色字体 333</font>
示例：
效果：
4.并集选择器
1.1 概述及格式
并集选择器：指为多组不同的标签，设置相同的 CSS 样式。
格式：（用逗号分隔）
选择器 1 ，选择器 2 …..{
/*css 样式代码 */
}
意思为：为选择器 1 和 选择器 2 设置相同 CSS 样式
1.2. 案例代码
准备代码：仅要求<hr/>上面的所有字体变为红色，<hr/>下面的字体为黑色
<span>我是 span 内容体</span>
<font>我是 font 内容体</font>
<div class="d1">我想和 span 样式一样</div>
<hr/>
<div>我不想和别人样式一样</div>
示例：
效果：
注意： * 通配符选择器因为效率极低，所以不建议使用。
建议使用并集选择器替代。
5.伪类选择器
1.1 概述及格式
伪类选择器：指不依靠元素 class 类名筛选，通过元素特征筛选的选择器。（鼠标悬停状态、点击
状态等）
作用：可以为 HTML 元素 设置更细致效果（某个动作 / 状态的效果、某个子元素效果）。
伪类选择器有很多种：链接伪类、结构伪类等。
本次讲解主要由链接伪类展开。
格式：（用冒号连接）
选择器 : 伪类 {
/*css 样式代码 */
}
意思为：为选择器 1 和 选择器 2 设置相同 CSS 样式
1.2 链接伪类：常见 API 及案例代码
准备代码：要求 mya 超链接：
链接地址从未被点击时为：黑色 black
链接地址已经被点击过为：灰色 gray
鼠标悬停时为：红色 red
链接被点击一瞬间为：粉色 pink
<a class="mya" href="http://www.czxy.com">伪类示例</a> <hr/>
<a href="http://www.czxy.com">正常链接</a>
常见的链接伪类值：建议的 设置顺序 LVHA
示例代码 1：
1.3 结构伪类：示例代码
结构伪类非本章节主讲，我们先进行引入，在后面章节根据需求进行完善讲解。
结构伪类值包括： :root 、 :not 、 :only-child 、 :first-child 、 :last-child 等。
准备代码： div 下第一个子元素字体颜色变为红色， div 下最后一个子元素字体颜色变为蓝色
<div class="d1">
<font>1</font>
<font>2</font>
<font>3</font>
<font>4</font>
<font>5</font>
<font>6</font>
</div>
常见的结构伪类值：
示例代码：
1.4 伪类和伪元素的区别（了解）
1 、伪元素：不是 HTML 上真正的元素，在 HTML 不存在，可以为 HTML 中某元素的内容体追加更细致
效果。
在 css 产生作用时，才会有创造一个新元素的效果。
:before
:after
:first-letter :first-line
以上效果都好像在内容体中追加了一个带有特殊样式的 span
2 、伪类选择器：可以为 HTML 中真正存在的元素 设置更细致效果（某个动作的效果、某个子元素效果）
在 CSS 产生作用时，不会有创造新元素的效果，仅会在已有元素上设置效果。
:active :focus
:hover
:link
:visited
是设置元素在某个动作下的效果
:first-child
是设置子元素效果
总结： 伪元素作用于 元素内容体 ，生效时会有 追加特殊样式 span 的效果
伪类选择器 作用于 元素 ，生效时会 设置元素动作效果和子元素效果
6.总结
