【网页前端】CSS进阶之复合选择器
👀专栏介绍
【前端网页】 目前主要更新HTML，一起学习一起进步。
👀本期介绍
本期主要介绍CSS进阶之复合选择器
文章目录
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.总结
腾讯云开发者
