你的位置:首页 > 网页设计

[网页设计]CSS中的特殊性、继承、层叠


前言

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

 

引入问题

  

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

  

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

 

CSS规则结构

  

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

 

特殊性的比较规则:层叠

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

    1. 首先按照权重比较:

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

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

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

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

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

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

    

 

小结

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