CSS规则的执行顺序.docx

welcometogaodayue的网络日志

strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。

规则二：

继承的样式和直接指定的样式冲突时，直接指定的样式获胜。

在上面的例子中，假如还指定了strong元素的样式，如：

strong{color:

red;}

那么根据规则二，strong中的文字最终显示为红色。

规则三：

直接指定的样式发生冲突时，样式权值高者获胜。

样式的权值取决于样式的选择器，权值定义如下表。

CSS选择器

权值

标签选择器

1

类选择器

10

ID选择器

100

内联样式

1000

伪元素（:

first-child等）

1

伪类（:

link等）

10

可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav.currenta”的权值为100+10+1=111。

规则四：

样式权值相同时，后者获胜。

考虑下面这种情况

Writtenby

jean@cosmofarmer.

com">JeanGrainedePomme

.bylinea{color:

red;}

p.email{color:

blue;}

“.bylinea”与”p.email”都直接指定了上面的a元素，且权值都为11，根据规则四，最终显示蓝色。

由于样式表可以是外部的，也可以是内部的，规则四提醒我们要注意外部样式表引入的顺序（及元素的顺序），以及外部样式表与内部样式表的出现位置。

一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在之前。

规则五：

!

important的样式属性不被覆盖。

!

important可以看做是万不得已的时候，打破上述四个规则的”金手指”。

如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!

important，以规则四的例子为例，”.bylinea{color:

red!

important;}”可以强行使链接显示红色。

大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!

important。

CSS规则的执行顺序

你对CSS规则的执行顺序是否了解，这里和大家分享一下，若两条规则具有相同的权值、起源及特殊性，那在样式表中最后出现的规则优先。

1、CSS规则之特殊性

首先来看一下这个例子将会发生的情形：

复制代码

.grape{color:

Blue;}

H1{color:

Red;}

MeerkatCentral

复制代码

H1和.grape都匹配上面的H1元素，那么到底应该使用哪一个呢？

实践证明.grape是正确答案，把句子显示为蓝色。

根据规范，一般的HTML元素选择符（H1,P等）具有特殊性：

1、类选择符具有特殊性10，ID选择符具有特殊性100，值越大，权重就越大，越优先。

复制代码

H1

{

color:

Red;

}

/*特殊性=1*/

PEM

{

color:

Blue;

}

/*特殊性=2*/

.grape

{

color:

Fuchsia;

}

/*特殊性=10*/

P.bright

{

color:

Yellow;

}

/*特殊性=11*/

P.brightEM.dark

{

color:

Gray;

}

/*特殊性=12*/

#ID01

{

color:

Red;

}

/*特殊性=100*/

复制代码

2、CSS规则之继承

在特殊性的框架下，被继承的值具有特殊性0，也就是说任何显式声明的规则将会覆盖其继承样式，即便这条规则具有多高的权重。

复制代码

#ID01{color:

Red;}

/*特殊性=100*/

EM{color:

Gray;}

/*特殊性=1*/

MeerkatCentral

复制代码

虽然ID选择符特殊性最高，但由于在特殊性的框架下，继承值只有特殊性0，因些Central会显示为Gray颜色。

3、CSS规则之STYLE元素

还有sytle元素在CSS下权值定义为100，尽管ID选择也一样，实际上style元素比ID具有更高的特殊性。

　　#ID01,EM{color:

Gray;}

Meerkat

red;">Central

会显示为red颜色。

4、CSS规则之重要性（!

important）

!

important具最高特特性比如说1000，因此!

important规则会覆盖内联STYLE属性的内容。

程序代码

H1{color:

red!

important;}

black;">MeerkatCentral!

将显示为RED颜色。

一种特殊情形

复制代码

P#warn

{

color:

Red!

important;

}

EM

{

color:

Black;

}

Thistextisred,butemphasizedtextisblack.

复制代码

虽然定义!

important最高特殊性，但句子并没有全部显示为RED红色，为什么呢？

也许我们得回头看看前面的规则，在前面的第二点继承中提“在特殊性的框架下，继承值只有特殊性0。

”

因此,即便定义!

important，继承里的特殊性也只有0，所以显示为特殊性为1的EM规则。

权重顺序为：

继承=>HTML普通选择符=>类选择符=>style元素=>!

important

5、CSS规则之层叠

1）若两条规则具有相同的权值、起源及特殊性，那在样式表中最后出现的规则优先。

2）任何位于文档中的规则都比引入的规则优先。