深入解析css-学习小结

绪论

盒模型

层叠 优先级 继承

层叠

层叠指规则冲突时，如何选择规则。规则冲突解决顺序：

样式表来源

用户代理样式

用户代理样式：浏览器默认样式

作者样式表：你自己写的css样式

作者样式表会覆盖用户代理样式，因为浏览器先加载用户代理样式，再加载作者样式，所以作者样式会覆盖用户代理样式

例子：

重要声明

在css行末加! important，该行即表示重要声明

总结当前优先级：! important > 作者样式 > 用户代理样式

理解优先级

如果浏览器无法通过来源解决优先顺序，则会检查他们的优先级。浏览器将优先级分为两部分：html行内样式和选择器样式

行内样式

即在元素内手动给属性style赋值，行内样式会覆盖样式表的样式，行内样式没有选择器，因为直接作用于元素。如果样式表的样式带了! important，则行内样式同样带! important的样式声明无法覆盖样式表的样式

选择器优先级

选择器优先级类似操作符优先级 有一定顺序 比如两个类名选择器的优先级高于一个类名选择器 

规则：选择器如果存在多个相同id，则id最多的选择器优先；如果id数量一致，则类名最多的选择器优先；如果id和类名数量都相同，有最多标签名的选择器优先。例如下图，数字越大越优先

其他规则：伪类选择器和属性选择器优先级作用和类选择器作用相同；通用选择器和组合选择器对优先级没有影响

应用：有时候你的样式没有生效，可能是选择器呗更高优先级的选择器覆盖了

优先级标记

可以用linux三位数文件权限理解css选择器优先级，三位数从高到底依次为id选择器数量，类选择器数量，标签选择器数量。计算每个选择器的优先级标记值，值高的优先级越高，越优先

源码顺序

即当样式表来源和选择器优先级都相同时，根据css声明顺序决定哪个样式起作用，也即最后声明的会覆盖

其他经验

不要使用id选择器，因为id选择器优先级过高

尽量不要使用! important ，因为选择器多了，优先级很难搞

继承

如果元素没有设置样式，则会继承父元素的样式

特殊值

inherit

让属性继承父类的属性

initial

让属性使用初始默认值

比如color: initial等于color: black, dispkay: initial等于display:inline, 

简写属性

比如font，background，border，padding等属性

需要注意简写属性会覆盖其他省略的属性

简写顺序

有的属性简写顺序模糊，比如border: 1px solid可以无序 有的比如padding就有顺序 需要注意

padding，margin这类属性顺序是上右下左