四、选择器进阶
1.1后代选择器：空格
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2{css}
结果：
- 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意点：
- 后代包括：儿子，孙子，重孙子…
- 后代选择器中，选择器与选择器之前通过空格隔开
1.2子代选择器：>
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2{css}
结果：
- 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意点：
- 子代只包括：儿子
- 子代选择器中，选择器与选择器之前通过>隔开
2.1并集选择器
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1,选择器2{CSS}
结果：
- 找到选择器1和选择器2选中的标签，设置样式
注意点：
- 并集选择器中的每组选择器之间通过，分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
3.1交集选择器：紧挨着
作用：选中页面中 同时满足 多个选择器的标签
选择器语法：选择器1选择器2{css}
结果：
- （既又原则）找到页面中即能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
4.1hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover{css}
注意点：
- 伪类选择器选中的元素的某种状态
5.1emmet语法
作用：通过简写语法，快速生成代码
语法：
- 类似于刚刚学习的选择器的写法
| 记忆 | 示例 | 效果 |
|---|---|---|
| 标签名 | div | <div></div> |
| 类选择器 | .red | <div class="red"></div> |
| id选择器 | #one | <div id="one"></div> |
| 交集选择器 | p.red#one | <p class="red" id="one"></p> |
| 子代选择器 | ul>li | <ul><li></li></ul> |
| 内部文本 | ul>li(我是li的内容) | <ul><li>我是li的内容</li></ul> |
| 创建多个 | ul>li*3 | <ul><li></li><li></li><li></li></ul> |
<!--ul里面有3个li，li里面有文字111{文字}-->
<!--ul>li{111}*3-->
<!--ul有3个li，li文字1,2,3-->
<!--ul>li{$}*3-->
五、背景颜色
1.1背景颜色
属性名：background-color(bgc)
属性值：
- 颜色取值：关键字、rgb表示法、rgba表示法、十六进制…
注意点：
- 背景颜色默认值是透明：rgba(0,0,0,0)、transparent
- 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2.1背景图片
属性名：background-image(bgi)
属性值：background-image:url(‘图片的路径’)；
注意点：
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
3.1背景平铺
属性名：background-repeat(bgr)
属性值：
| 取值 | 效果 |
|---|---|
| repeat | (默认值)水平和垂直方向都平铺 |
| no-repeat | 不平铺 |
| repeat-x | 沿着水平方向（x轴）平铺 |
| repeat-y | 着垂直方向（y轴）平铺 |
4.1背景位置
属性名：background-position(bgp)
属性值：background-position：水平方向位置，垂直方向位置；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Te07UIO-1672930933088)(G:%5CHtmlStudySpace%5Cimgs%5C%E8%83%8C%E6%99%AF%E4%BD%8D%E7%BD%AE%E5%B1%9E%E6%80%A7%E5%80%BC.png)]
注意点：
- 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
5.1背景相关属性的连写形式
属性名：background(bg)
属性值：
- 单个属性值的合写，取值之间以空格隔开
书写顺序：
- 推荐：background:color image repeat position
省略问题：
- 可以按照需求省略
- 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()
注意点
- 如果需要设置单独的样式和连写
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
6.1（拓展）img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果
方法一：直接写上img标签即可
- img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签+背景图片
- 需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签
六、元素显示模式
1.1块级元素
显示特点：
- 独占一行（一行中能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
代表标签：
- div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
1.2行内元素
显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签：
- a、span、b、u、i、s、strong、ins、em、del…
1.3行内块元素
显示特点：
- 一行可以显示多个
- 可以设置宽高
代表标签：
- input、textarea、button、select…
- 特殊情况：img标签有行内块元素特点，但是Chrome调式工具中显示结果是inline
1.4元素显示模式转换
目的：改变元素默认的显示特点，让元素复合布局要求
语法：
| 属性 | 效果 | 使用频率 |
|---|---|---|
| display:block | 转换成块级元素 | 较多 |
| display:inline block | 转换成行内块元素 | 较多 |
| display:inline | 转换成行内元素 | 极少 |
拓展1：HTML嵌套规范注意点
块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…
但是：p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
七、CSS特性
1.1继承性的介绍
特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性（文字控制属性都可以继承）
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
- …
1.2层叠性的介绍
特性：
- 给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
- 给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意点：
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
1.3优先级的介绍
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
- 谁的选择范围范围广，谁的优先级低
注意点：
- !important写在属性值的后面，分号的前面!
- !important不能提升继承的优先级，只能是继承
- 实际开发中不建议使用!important
<style>
#box{
color:orange;
}
.box{
color:blue;
}
div{
color:green !important;
}
body{
color:red;
}
/*!important不要给继承的添加，自己有样式无法继承父级样式*/
</style>
<body>
<!--意义：当一个标签使用了多个选择器，样式冲突的时候，到底谁生效-->
<div class="box" id="box" style="color:pink;">
测试优先级
</div>
</body>
1.3.1权重层叠计算
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）
比较规则：
- 先比较第一级数字，如果比较出来了，之后的通通不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的通通不看
- …
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算！）
注意点：!important如果不是继承，则权重最高，天下第一！
