四、CSS深入学习
4.1 复合选择器
定义：由 两个或多个基础选择器，通过不同的方式组合而成
作用：更准确、更高效地选择目标元素（标签）
<span>span标签</span>
<div>
<span>文字颜色</span>
</div>
后代选择器
选中某元素的所有后代元素
父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开
<style>
div span
{
color:red;
}
</style>
<span>span标签</span>
<div>
<span>div标签的子级</span>
</div>
只要在父级标签中有相符的子级标签就会生效
子代选择器
选中某元素的子代元素
父选择器>子选择器{CSS属性}，父子选择器之间用>隔开
<style>
div > span
{
color:red;
}
</style>
<div>
<span>div中的span</span>
<p>
<span>div里的p中的span</span>
</p>
</div>
只能选中父级标签中相符的子级标签，其他后代标签不生效
并集选择器
选中多组标签设置相同的样式
选择器1,选择器2,...,选择器n{CSS属性}，选择器之间用,隔开
<!-- 建议在每个标签之后都跟上一个空格 -->
<style>
div,
p,
span
{
color:red;
}
</style>
<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
交集选择器
选中同时满足多个条件的元素
<style>
p.box
{
color:red;
}
</style>
<p class="box">
使用了类选择器的p标签
</p>
<p>
普通p标签
</p>
<div class="box">
使用了类选择器的div标签
</div>
如果在交集选择器中有标签选择器，标签选择器必须写在最前面
4.2 伪类选择器
伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态
选择器:hover{CSS属性}
<style>
a:hover
{
color:red;
}
.box:hover
{
color:green;
}
</style>
<a href="#">a标签</a>
<div class="box">div标签</div>
任何标签都可以设置鼠标悬停状态
超链接
| 选择器 | 作用 |
|---|---|
| :link | 访问前 |
| :visited | 访问后（默认紫色） |
| :hover | 鼠标悬停 |
| :active | 点击时（激活） |
如果要给超链接设置以上四个状态，需要按LVHA的顺序书写
一般都将超链接的所有状态设置为一个样式，除开鼠标悬停的时候进行特殊提示
4.3 CSS特性
化简代码/定位问题，解决问题
- 继承性
- 层叠性
- 优先级
Emmet写法
继承性
子级标签默认继承父级标签的文字控制属性
一般将文字控制属性设置给body标签
<style>
body
{
font-size:30px;
font-weight:700;
color:red;
}
</style>
<body>
<div>
div标签
</div>
<p>
p标签
</p>
<span>
span标签
</span>
<a href="#">
a标签
</a>
<!-- a标签自带有下划线和蓝色效果，此时并不受body标签中的相应影响 -->
</body>
子级标签中本身固定的效果不会受到父级标签的效果影响（抽象类？重写之类的？）
层叠性
- 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
- 不同的属性会叠加：不同的CSS属性都会生效
<style>
div
{
color:red;
font-weight:700;
}
div
{
color:green;
font-size:30px;
}
</style>
<div>
div标签
</div>
优先级
又叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
<style>
div
{
color:red;
}
.box
{
color:green;
}
</style>
<div class="box">
div标签
</div>
通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important（提权，将优先级提到最高）
选中标签的范围越大，优先级越低
<style>
#test
{
color:orange;
}
.box
{
color:blue;
}
div
{
color:green;
}
*
{
color:red /* !important */;
}
</style>
<div class="box" id="test" style="color:purple;">
div标签
</div>
叠加计算
如果是复合选择器，则需要权重叠加计算
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
- 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
!important权重最高- 继承权重最低
Emmet写法
代码的简写方式，输入缩写VS Code会生成对应的代码
-
HTML
说明 标签结构 Emmet 类选择器 <div class="box"></div>标签名.类名id选择器<div id="box"></div>标签名#id名同级标签 <div></div><p></p>div+p父子级标签 <div><p></p></div>div>p多个相同标签 <span>1</span><span>2</span><span>3</span>span*3有内容的标签 <div>内容</div>div{内容} -
CSS：大多数简写方式为属性单词的首字母
4.4 背景属性
| 描述 | 属性 |
|---|---|
| 背景色 | background-color |
| 背景图 | background-imag |
| 背景图平铺方式 | background-repeat |
| 背景图位置 | background-position |
| 背景图缩放 | background-size |
| 背景图固定 | background-attachment |
| 背景复合属性 | background |
拆分写法
背景图
网页中，使用背景图实现装饰性的图片效果
属性名：background-imag（bgi）
属性值：url（背景图URL）
<style>
div
{
width:400px;
height:400px;
background-imag:url(./img/1.jpg);
}
</style>
浏览器中的默认效果是平铺效果，会复制填充掉剩余的盒子空间
背景属性
属性名：background-repeat（bgr）
属性值：
| 属性值 | 效果 |
|---|---|
| no-repeat | 不平铺 |
| repeat | 平铺（默认效果） |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
背景图位置
属性名：background-position（bgp）
属性名：水平方向位置 垂直方向位置
-
关键字
关键字 位置 left 左侧 right 右侧 center 居中 top 顶部 bottom 底部 -
坐标（数字+
px，正负都可以）
<style>
div
{
width:400px;
height:400px;
background-color:pink;
background-imag:url(./img/1.jpg);
background-repeat:no-repeat;
background-position:center bottom;
background-position:50px -100px;
background-position:50px center;
}
</style>
关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认为居中；数字只写一个表示水平方向，垂直方向为居中
背景图缩放
作用：设置背景图大小
属性名：background-size（bgz）
属性值：
-
关键字：
cover：等比例缩放背景图片以完全覆盖背景区，可能使背景图片部分看不见contain：等比例缩放背景图片以完全装入背景区，可能使背景区部分空白
-
百分比：根据盒子尺寸计算图片大小
-
数字 + 单位（例如：
px）
背景图固定
作用：背景不会随着元素的内容滚动
属性名：background-attachment（bga）
属性值：fixed
<style>
body
{
background-image:url(./image/1.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
复合写法
属性名：background（bg）
属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）
<style>
div
{
width:400px;
height:400px;
background:pink url(./image/1.jpg) no-repeat right center/cover;
}
</style>
