CSS选择器——层叠和特殊性

 

学习CSS最好的方式之一是直接开始使用它。

 

有两个或更多规则寻找同一个元素，CSS通过一个称为层叠的过程处理这些冲突。层叠给每个规则分配一个重要度。

 

！important规则

body
{  
background:#000 !important; 
/*!important语法出现在声明中，位于属性值之后、结束声明的分号之前。*/
} 

包含！important规则的声明优先于其他任何声明，甚至是style属性。如果有多条！important规则，后一条规则优先。

 

层叠采用以下重要度次序：

1. 标为！important的用户样式

2. 标为！important的作者样式

3. 作者样式

4. 用户样式

5. 浏览器/用户代理应用的样式

 

1、特殊性

计算规则的特殊性，选择器的特殊性分为四个成份等级：a、b、c、d

行内样式 a=1

b=ID选择器的总数

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

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

 

选择器	特殊性	以10为基数的特殊性
style=””	1,0,0,0	1000
#wrapper #content{}	0,2,0,0	200
#content .datePosted{}	0,1,1,0	110
div #content{}	0,1,0,1	101
#content{}	0,1,0,0	100
p.comment.dateposted{}	0,0,2,1	21
p.comment{}	0,0,1,1	11
div p{}	0,0,0,2	2
p{}	0,0,0,1	1

 

基本上，用style属性编写的规则总是比其他任何规则特殊，具有ID选择器的规则比没有ID选择器的规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。最后，如果两个规则的特殊性相同，那么后定义的规则优先。

 

2、在样式表中使用特殊性

保持一般样式非常一般，特殊样式非常特殊，从而不需要覆盖特殊样式，避免混乱。

如果发现不得不多次覆盖一般样式，那么从一般样式中删除需要覆盖的声明，并且将它显示地应用于需要它的每个元素，这样可能比较简单。

 

3、在主体标签(body)上添加类或ID

可以根据页面或在站点范围内覆盖样式。

例如，如果希望主页与站点的其他部分不同的布局，可以在主页的主体元素上添加一个类名，并且使用它覆盖样式：

#content { float:left; }
.homepage #content { float:right; }

#nav { float:right; }
.homepage #nav { float:left; }

 

在站点的每个页面上添加一个ID，这样用户样式就可以覆盖作者样式。站点范围的ID（俗称CSS签名）一般采用id="www-sitename-com"格式，采用一下规则就可以添加样式：

body#www-sitename-com
{
font-size:200%;
background-color:black;
color:white;
}