复合选择器、CSS特性、背景属性和显示模式
一、复合选择器
定义：由两个或多个基础选择器通过不同所方式组合而成。
1.后代选择器
（1）作用：更准确、更高效的选择目标元素(标签)
（2）写法：父选择器 子选择器{CSS属性}
- 父子选择器之间用空格隔开
2.子类选择器
（1）作用：选中某元素的子代元素
（2）写法：父选择器>子选择器
- 父子选择器之间用>隔开
3.并集选择器
（1）作用：选中多种标签设置相同的样式
（2）写法：选择器1，选择器2，...{CSS}
- 选择器之间用,隔开
4.交集选择器
（1）作用：选中同时满足多个条件的元素
（2）写法：选择器1选择器2...{CSS}
- 选择器之间连写，没有任何符号
（3）注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面
5.伪类选择器
（1）作用：伪类表示元素状态。选中元素的某个状态设置样式
（2）鼠标悬停状态：选择器:hover{css属性}
5*.伪类——超链接
（1）超链接一共有四个状态
| 选择器 | 作用 |
|---|---|
| :link | 访问前 |
| :visited | 访问后 |
| :hover | 鼠标悬停 |
| :active | 点击时（激活） |
（2）提示：如果要给链接设置以上四个状态，需要按LVHA的顺序书写
CSS特性
作用：化简代码/定位问题，并解决问题
1.继承性
（1）子级默认继承父级的文字控制属性
（2）等子级自己有默认属性则不继承父级该属性
2.层叠性
（1）特点
- 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
- 不同的属性会叠加：不同的CSS属性都生效
3-1.优先性
（1）定义：优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则
（2）规则：选择器优先级高的样式生效
（3）公式：通配符选择器<选择选择器<类选择器<id选择器<行内样式<！important
- 选中标签的范围越大，优先级越低
3-2.优先性——叠加计算规则
（1）叠加计算：如果是复合选择器，则需要权重叠加计算
（2）公式：行内样式，id选择器个数，类选择器个数，标签选择器个数
（3）规则：
- 从左向右依次比较选择器个数，同一级个数多的优先级高，如果个数相同，则向后比较
- ！important权重最高
- 继承权重最低
三、背景属性
| 描述 | 属性 |
|---|---|
| 背景色 | background-color |
| 背景图 | background-image |
| 背景图平铺方式 | background-repeat |
| 背景图位置 | background-position |
| 背景图缩放 | background-size |
| 背景图固定 | background-attachment |
| 背景复合属性 | background |
1.背景图
网页中，使用背景图实现装饰性的图片效果
（1）属性名：background-image
（2）属性值：url
（3）背景图默认是平铺（复制）的效果
2.背景图平铺方式
（1）属性名：background-repeat
（2）属性值
| 属性值 | 效果 |
|---|---|
| no-repeat | 不平铺 |
| repeat | 平铺 |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
3.背景图位置
（1）属性名：background-position
（2）属性值：水平方向位置 垂直方向位置（中间空格）
- 关键字
关键字 位置 left 左侧 right 右侧 center 居中 top 顶部 bottom 底部 - 坐标（数字+px，正负都可以）
（3）注意：
- 关键字取值方式写法，可以颠倒取值顺序
- 可以只写一个关键字，另一个方向默认为居中，数字只写一个值表示水平方向，垂直方向为居中
4.背景图缩放
（1）作用:设置背景图大小
（2）属性名：background-size
（3）属性值
- 关键字
cover 等比例缩放背景图片以完全覆盖背景区，可能背景图片部分不见 contain 等比例缩放背景图片以完全装入背景区，可能背景部分空白 - 百分比：根据盒子尺寸计算图片大小
- 数字+单位（例如：px）
5.背景图固定
（1）作用:背景不会随着元素的内容滚动
（2）属性名：background-attachment
（3）属性值：fixed
6.背景复合属性
（1）属性名：background
（2）属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定
- 空格隔开各个属性，不区分大小写
四、显示模式
1.类别
（1）块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
（2）行内元素
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
（3）行内块元素
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸由内容撑开
2.转换显示模式
（1）属性名：display
（2）属性值
| 属性值 | 效果 |
|---|---|
| block | 块级 |
| inline-block | 行内块 |
| inline | 行内 |
