CSS【进阶】
目录
一、复合选择器
二、并集选择器
三、交集选择器
四、hover伪类选择器
五、VScode的Emmet语法
六、CSS属性：背景相关
七、元素显示模式
八、拓展：HTML标签嵌套规范
九、CSS三大特性
十、谷歌排错方法
一、复合选择器
1.后代选择器
作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法： 选择器父 选择器后代 { }
结果：
-
在选择器父所找到标签的后代中，找到满足选择器后代的标签
注意点：
-
后代包括：儿子、孙子、重孙子........
-
后代选择器中选择器父和选择器后代之间通过空格隔开
-
若找不到父选择器，自然后代也找不到 （因此在父多的时候，一定要看仔细了，如果实在不行就debug）
哈哈哈
嘎嘎嘎
顶顶顶顶
//若删除div标签，则都不被渲染2.子代选择器
作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法： 选择器父 > 选择器子 { }
结果：
-
在选择器父所找到标签的儿子中，找到满足选择器子的标签
注意：
-
子，是指儿子只代表第一代儿子
-
子代选择器中，选择器父和选择器子通过 > 隔开
-
若找不到父选择器，自然子代选择器也找不到
哈哈哈
嘎嘎嘎
顶顶顶顶
//若删除div标签，则都不被渲染二、并集选择器
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1 , 选择器2 { }
结果：
-
找到 选择器1 和 选择器2 选中的标签，设置样式
注意：
-
并集选择器中的每组选择器之间通过 , 隔开
-
并集选择器中的每组选择器可以是 基础选择器 或 复合选择器
-
并集选择器中的每组选择器通常一行写一个，提高代码可读性
哈哈哈
嘎嘎嘎
顶顶顶顶
点击我
得瑟得瑟三、交集选择器
作用：选中页面中 同时满足 多个选择器的标签
选择器语法：选择器1选择器2 { }
结果：
-
（既又原则）找到页面中 既 能被选择器1选中，又能被选择器2选中的标签，设置样式
注意：
-
交集选择器中的选择器之间是紧挨着的，没有东西分隔
-
交集选择器中如果有标签选择器，则标签选择器写在最前面
温馨提示：开发中常用于类名相同且在同一个父里面的情况
这是'p'
这是'div'
四、hover伪类选择器
作用：选中鼠标 悬停 在标签上的标签
选择器语法： 选择器：hover {css}
注意：
-
伪类选择器选中的元素的某种状态
悬停选择器
五、VScode的Emmet语法
作用：通过简写语法，快速生成代码
语法：
-
标签选择器: div == >
-
类选择器： .red ==>
-
id选择器： #one ==>
-
交集选择器： p.red#one ==>
-
子代选择器： ul>li ==>
-
创建多个： ul>li*2 ==>
-
内容文本： ul>li{li的内容} ==>
- li的内容
-
css属性: 例如 fw ==> font-weight： 以此类推.....
-
css快速: 例如 w200+h100 ==> width: 200,height: 100
-
以此类推.....
六、CSS属性：背景相关
1.背景颜色
属性名：background-color
属性值：
1.颜色单词
2.rgb( , , ) 、 rbga( , , , )
3. #16进制数
背景学习2.背景图片
属性名：background-image
属性值：url('图片的路径')
背景学习3.背景平铺
用于盒子比背景图片大时，图片该如何填充盒子的方式
属性名：background-repeat
属性值：
repeat 默认值，水平和垂直方向都平铺
no-repeat 不平铺，最常用
repeat-x 沿着水平（x轴）方向平铺
repeat-y 沿着竖直（y轴）方向平铺
背景学习4.背景位置
由于图片插入背景图片且不平铺的情况下，默认为左上角，因此需要改动位置
属性名：background-position
属性值： 水平方向位置 垂直方向位置
1.单词方位
水平方向:left，center，right
垂直方向：top，center，bottom
2.数字+px (坐标)
以左上角为圆点(0.0)
x，y坐标
注意：
-
方位和坐标可以混用&且超出了盒子的位置不显示&单词方位可以不按顺序来，数字坐标一定要按顺序
背景学习5.复合属性
属性名：background
属性值：由这些组合color，image，repeat，position
背景学习6.img标签和background-image属性的区别
background-image属性作为背景图片，受到盒子限制，不覆盖
img标签作为图片，不受任何盒子限制，会覆盖
两个不是一个级别的,按照重要级： img标签 > background-image属性
七、元素显示模式
学习元素显示模式的作用：用于网页排版
1.块级元素
显示特点：
1.独占一行(一行只能显示一个)
2.宽度默认是父元素的宽度
3.高度默认由内容撑开
4.可以设置宽度和高度
代表标签：
-
div、h系列、p、ul、li、ol、li、dl、dt、form、header、nav、footer....
2.行内元素
显示特点：
1.一行可以显示多个,不独占一行
2.宽度和高度默认由内容撑开
3.不可以设置宽度和高度
代表标签：
-
span、a、b、u、i、s、strong、ins、em、del......
3.行内块
显示特点：
1.一行可以显示多个,不独占一行
2.宽度和高度默认由内容撑开
3.也可以设置宽度和高度
代表标签：
-
input、textarea、button、select......
-
特殊情况：img标签有行内块元素特点，但是Chrome调试器调试工具中显示结果是inline
4.元素显示模式转换
目的：改变元素默认显示模式，让元素符合布局要求
属性：display
属性值：
block 转换成块级元素（常用）
inline 转换成行内元素（少用）
inline-block 转换成行内块元素（常用）
八、拓展：HTML标签嵌套规范
规则：
一般将块级元素作为大容器，来嵌套：文本、块级元素、行内元素、行内块元素....
注意事项：
p标签不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素，但是a标签不能嵌套a标签
九、CSS三大特性
1.继承性
特性：子标签有默认继承父标签样式的特点（子承父业）
常见可以继承的属性（一般是控制文字和文本的属性）
1.color
2.font家族
3.text-indent、text-align
4.line-height
5......
注意：
-
可以通过调试工具来判断样式是否可以继承
-
如果标签有浏览器赋予的样式，此时继承仍然存在，但是会失效，例如a标签浏览器赋予蓝色字体（color失效），h系列标签浏览器赋予字体大小（font-size失效)-----优先级的关系
说白了就是 浏览器赋予的>父继承的
hhh
ggg
2.层叠性
特性：
1.给同一个标签设置 不同 的样式，此时样式会层层叠加，共同作用在同一标签上
2.给同一个标签设置 相同 的样式，此时样式会覆盖，写在后面的覆盖前面的
注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果，也就是说层叠性用于同一级别选择器选中的发生层叠，不同级别的选择器按照高级别选择器为主
大大
3.优先性（重点）
特性：不同类型选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式：
-
继承<通配符<标签<类
温馨提示：不需要死记优先级，按照选中的精准度判断即可，越精准的优先级越高
知识补充： !important
!important属性值具有提高该属性的优先级，可以将其提高至最高优先级
-
!important写在属性值的后面，分号的前面，例如color: purple !important;
-
!important不能提升继承的优先级，只要是继承优先级就是最低
-
实际开发中不建议使用!important
#study{
color: red;
}
.stu{
color: blue;
}
div{
color: purple !important;//加了!important字体变成紫色
}
*{
color: green;
}
body{
color: yellow;
}
优先级的学习
权重叠加计算
我们知道，前面我们只学习了基本选择器的优先级，还没学习多个选择器的优先级，多个选择器的优先级通过权重叠加计算来判断
场景：如果是多个选择器，此时需要通过权重叠加计算方法，判断哪个复合选择器会生效
权重叠加公式：（每一级之间不存在进位）
（ 0 ， 0 ， 0 ， 0 ）
行内式个数 id选择器个数 类选择器个数 标签选择器个数
比较规则：
先比较第一级数字，如果比较出来了，之后统统不要看，以此类推第二个、第三个、第四个数字
温馨提示：!important如果不是继承，则权重最高，天下第一，也不用去使用权重计算了
权重叠加学习
练习题1
权重叠加练习1
练习题2
权重叠加练习4
练习题5
权重叠加练习5
十、谷歌排错方法
开发中，如果写css代码的时候，需要修饰的地方没有效果，则使用谷歌调试工具去选中你要修饰的的地方，看看css样式有没有问题，然后再对应去解决问题
温馨提示：出现红色下划线一般是语法有错误