CSS(三)——层叠样式表
前提概念
理解层叠样式表的前提:理解声明冲突
声明冲突:
同一个样式,多次应用到了同一个元素。
层叠
解决声明冲突的过程(浏览器自动处理)
声明冲突的解决办法
-
比较重要性:
重要性从高到低
a)作者样式表中的**!important样式:在属性后加上!important**,表示是一个最重要的样式
不建议使用
b)作者样式表中的普通样式
c)浏览器中默认样式表中的样式
-
比较特殊性:
总体规则:选择器选择的范围越窄,越特殊。
具体规则:通过选择器,计算一个4位数
a. 千位:如果是内联样式,1;否则0。
b. 百位:选择器中所有id选择器的数量
c. 十位:等于选择其中所有类选择器、属性选择器、伪类选择器的数量。
d. 个位:等于选择其中所有元素选择器、伪元素选择器的数量
综上所述,内联样式 ——》 id选择器 ——》 类、伪类、属性选择器 ——》 元素、伪元素选择器
【注】:该四位数字是256进制
-
比较源次序:
代码靠后的被执行。——笑到最后的才是赢家。
开发时的应用
-
重置样式表:
书写一些作者样式,覆盖浏览器的默认样式。
重置样式表覆盖默认样式表
**常见的重置样式表:**normalize.css、reset.css、meyer.css。
-
爱恨法则:
link 》visited 》 hover》 active。
书写规则的原因:
因为在鼠标移动到元素上时,希望hover执行,所以hover要靠后,active是需要点击才可以触发的样式。
继承
子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承——宽高不能被继承(width、height)
-webkit-match-parent表示继承父元素的属性。
总结
本篇笔记记录了CSS中重要的层叠样式表。层叠样式表中需要解决的问题是声明冲突:声明冲突的解决办法共有三种。
其中内联样式表中有重要以及普通两种,除开内联样式表的内部以外,还有作者样式表还有浏览器默认样式表(作者样式表会覆盖浏览器默认样式表)。
其次介绍了继承的概念,后续会有详细解释。