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.总结