CSS学习笔记(三)层叠和特殊性

在样式表现时,有可能会出现两个或更多的样式寻找同一元素,这就可能出现表现层的不确定性和样式冲突

CSS通过“层叠”给每个规则分配一个重要度

层叠一般采用以下重要度层次:

  * 标准!important的用户样式

  * 标准!important的作者样式

  * 作者样式

  * 用户样式

  * 浏览器和用户代理应用的样式

根据选择器的特殊性决定规则的次序,若是特殊性相同,后定义的规则优先。

特殊性

为了计算选择器的特殊性,每种选择器被分配一个数字值,将规则的每个选择器的值加在一起,计算出规则的特殊性。

选择器的特殊性分为四个等级:a、b、c、d

  * 行内样式一般为,a=1

  * b=ID选择器的数量

  * c=类、伪类和属性选择器的数量

  * d=类型选择器和伪元素选择器数量

选择器                            特殊性                      以10为基数的特殊性

style=""                           1,0,0,0                        1000

#wp #content{}                        0,2,0,0                        200    

#content .date{}                       0,1,1,0                        110

div #conent{}                         0,1,0,1                        101

p .content{}                         0,0,1,1                        11

有上述特殊性计算可知,

用style属性编写的规则总是比其他任何规则特殊

有ID选择器的规则比没有ID选择器的规则特殊

具有类选择器的规则比只具有类型选择器的规则特殊

若特殊性相同,则后定义的规则优先

在样式表中使用特殊性

可以对一般元素使用一般样式,然后在更特殊的元素上覆盖它们

form {width:30px}

form#search {15px}

一种使用特殊性的方法是在主体标签(body)上应用ID或类,这样可以根据页面或站点范围内覆盖样式

#nav {float:left;}

.homepage #nav {float:right;}

继承

应用样式的元素后代会继承样式的某些属性,比如,字体,字号,颜色

p h1 h2 h3 ul li {color:black;}

更简洁的作法是:

body{color:black;}

原文地址:https://www.cnblogs.com/qixing/p/2856030.html