前言

  最近在看《CSS权威指南》,书中第三章“结构和层叠”对特殊性的解释十分到位,今天就来整理下思路,记录如下。

  初来乍到,有何不妥请多多指点,有时间的话顺便评论下,讨论讨论~

引入问题

  CSS中的特殊性、继承、层叠-LMLPHP

  非常简单的一个列表结构,那么想对“第一个”字样设置字体颜色,可能有两种方法:

  CSS中的特殊性、继承、层叠-LMLPHP

  那么问题来了,究竟字体会变成什么颜色?

CSS规则结构

  CSS中的特殊性、继承、层叠-LMLPHP

  每条CSS规则的结构如上,请记住各自名称,否则继续前行会有不适感。

特殊性

  关于特殊性的概念和作用书中说的很详细:

    对于每个规则,用户代理(浏览器)会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。

    如果一个元素有两个或多个冲突的属性生命,那么有最高特殊性的声明就会胜出。

  整体来说分为两部分:计算和比较。第一眼看到肯定不太理解,那么先用起来,没事儿的时候回来看看,豁然开朗。

特殊性的计算规则

  按照特殊性的介绍中所述,如何计算特殊性是非常重要的,下面是书中所给的计算规则:

    1. 内联样式: 1,0,0,0

    2. ID选择器: 0,1,0,0

    3. class选择器、属性选择器、伪类选择器: 0,0,1,0

    4. 元素选择器、伪元素选择器: 0,0,0,1

    5. 通配符选择器: 0,0,0,0

    6. 结合符、继承: 没有特殊性

    7. !important:按照有无该关键字分为两组,各自计算

    注:四组数字之间没有任何关系,不存在进位一说。  

  上面的规则涵盖了所有可能出现的CSS选择器,可以根据这些计算出相关选择器的特殊性,浏览器会将特殊性赋值给声明块中的每一个声明。

  CSS中的特殊性、继承、层叠-LMLPHP

  相关例子数不胜数,就不数了,会计算即可。

特殊性的比较规则:层叠

  反观特殊性的介绍,可知特殊性的计算是为了比较,进而决定胜出的样式进行显示,比较的规则称为层叠,当然前提是声明出现冲突的情况下。规则如下:

    1. 首先按照权重比较:

      读者重要样式>创作者重要样式>创作者正常样式>读者正常样式>浏览器默认样式

    2. 前述条件不能比较时,按照特殊性比较:

      特殊性从左到右依次比较每组数字,如:1,0,0,1和0,2,0,0,会按照前者定义样式显示。

    3. 前述条件不能比较时,按照出现顺序比较:

      后出现的会覆盖先出现的。

  根据上面的规则,可以得出问题的答案:颜色会如下:

    CSS中的特殊性、继承、层叠-LMLPHP

小结

  第一次整理博客,收获蛮大的,平时看书大都一概而过,这次真的学透了。

04-28 03:17