CSS（三）——层叠样式表

CSS（三）——层叠样式表

前提概念

理解层叠样式表的前提：理解声明冲突

声明冲突：

​ 同一个样式，多次应用到了同一个元素。

层叠

​ 解决声明冲突的过程（浏览器自动处理）

声明冲突的解决办法

1. 比较重要性：

   重要性从高到低

   a）作者样式表中的**!important样式：在属性后加上!important**，表示是一个最重要的样式

   不建议使用

   b）作者样式表中的普通样式

   c）浏览器中默认样式表中的样式

2. 比较特殊性：

   总体规则：选择器选择的范围越窄，越特殊。

   具体规则：通过选择器，计算一个4位数

   a. 千位：如果是内联样式，1；否则0。

   b. 百位：选择器中所有id选择器的数量

   c. 十位：等于选择其中所有类选择器、属性选择器、伪类选择器的数量。

   d. 个位：等于选择其中所有元素选择器、伪元素选择器的数量

   综上所述，内联样式 ——》 id选择器 ——》 类、伪类、属性选择器 ——》 元素、伪元素选择器

   【注】：该四位数字是256进制

3. 比较源次序：

   代码靠后的被执行。——笑到最后的才是赢家。

开发时的应用

1. 重置样式表：

   书写一些作者样式，覆盖浏览器的默认样式。

   重置样式表覆盖默认样式表

   **常见的重置样式表：**normalize.css、reset.css、meyer.css。

2. 爱恨法则：

   link 》visited 》 hover》 active。

   书写规则的原因：

   因为在鼠标移动到元素上时，希望hover执行，所以hover要靠后，active是需要点击才可以触发的样式。

继承

子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承——宽高不能被继承（width、height）

-webkit-match-parent表示继承父元素的属性。

总结

​ 本篇笔记记录了CSS中重要的层叠样式表。层叠样式表中需要解决的问题是声明冲突：声明冲突的解决办法共有三种。

​ 其中内联样式表中有重要以及普通两种，除开内联样式表的内部以外，还有作者样式表还有浏览器默认样式表（作者样式表会覆盖浏览器默认样式表）。

​ 其次介绍了继承的概念，后续会有详细解释。