CSS层叠规则
深入z-index
z-index不仅只对定位元素有效，flex盒子的子元素也可以设置z-index z-index负值也无法突破当前层叠上下文的包裹 对于非浮层元素，避免设置z-index，z-index值不需要超过2
层叠准则
谁大谁上：当具有明显的层叠水平标识的时候，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那个 后来居上：当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素
深入了解层叠上下文
层叠上下文元素有如下特性： 1、层叠上下文的层叠水平要比普通元素高 2、层叠上下文可以阻断元素的混合模式 3、每个层叠上下文是自成体系的 4、每个层叠上下文和兄弟元素独立
根层叠上下文
根层叠上下文指的是页面根元素，可以看成是html元素，页面中所有的元素至少处于一个层叠的领域中
层叠上下文与层叠顺序
层叠上下文元素和定位元素是一个层叠顺序，当他们发生层叠时，遵循DOM流后来居上的原则
元素的隐藏与显示
如果希望元素不可见，同时不占据空间，辅助设备无法访问，但资源有加载，DOM可访问，可以使用display：none进行隐藏 如果希望元素不可见，不能点击，辅助设备无法访问，但占据空间保留需要使用visibility：hidden隐藏
display与元素显隐的关系
display计算值是none则该元素以及所有后代后代元素都隐藏
visibility与元素显隐的关系
visibility具有继承性，父元素设置visibility：hidden子元素也会看不见
CSS选择器
CSS选择器分为4种：选择器、选择符、伪类、伪元素
选择器
类型选择器也可以叫标签选择器，如body
选择符
有5种：后代关系空格、父子关系的箭头、表示相邻兄弟关系的加号、表示兄弟关系的波浪线、列关系双管道
伪类
伪类前有冒号，通常与浏览器行为和用户行为相关联，可以看做是CSS中的JavaScript
伪元素
前面有两个冒号，如::after
选择器的作用域
伪类:scope匹配局部作用域内的元素 注意：写选择器时，尽可能分开写，避免浏览器不支持某个选择器的时候，导致整个选择器全部失效
优先级
CSS中的优先级规则分为两大类：继承和级联
继承
被继承的CSS声明的优先级一定位于CSS中的底层 如果一个CSS属性同时继承自多个元素，则DOM层级越深元素继承的CSS优先级越高
级联
级联既是概念也是模块，其优先级高于继承 其中优先级最高是transition过渡声明 最低为浏览器内置样式
@layer规则
@layer规则的级联层级比常规的CSS代码的级联层级低。
深入!important
在CSS属性值的后面添加!important可以提升CSS属性的优先级 !important机制 !important是把对应的CSS属性带到更高级别的级联层级 !important逆向越级，如果原本的级联层级高的CSS使用了!important，优先级反而低。如果原本的级联层级低的CSS使用了!important，优先级反而高。
同等级CSS优先级规则
1、通配选择器、选择符和逻辑组合伪类 2、标签选择器 3、类选择器、属性选择器和伪类 4、ID选择器 5、style属性内联
CSS选择器的命名
CSS选择器是否区分大小写：有些不区分大小写，还有些可以设置为不区分大小写 HTML中标签和属性都是不区分大小写的，而属性值是区分大小写的，对应的，在CSS中，标签选择器不区分大小写，属性选择器中的属性也不区分大小写，而类选择器和ID选择器本质上是属性值，因此要区分大小写。
CSS选择器命名的合法性
CSS选择器可以用数字开头，但需要转义，不转义的数字开头是无效的 举例：
<div class="7-hastr">
hahaha
</div>
/*其中的\37和空格是CSS中字符串16进制转义表示*/
.\37 -hastr {
color: blue;
}
可以看到转义后的7开头的选择器，蓝色是生效的
长命名和短命名
CSS中尽量使用短命名，能明白意思即可，不必要把单词写完整
选择器的写法与使用
不要使用ID选择器，没有必须使用ID选择器的情况 缺点： 1、优先级太高 2、和JavaScript耦合 不要嵌套选择器 嵌套的缺点： 渲染性能不佳 优先级混乱 样式布局脆弱 当包含后代选择符的时候，整个选择器的优先级与祖先元素的DOM层级没有任何关系
