您的位置：首页 > Web前端 > CSS

高手总结的CSS执行顺序及其优先权问题汇总

2013-12-10 14:30 295 查看

今天在看一本书时又看到了”CSS优先权“这个问题，感觉这个问题还是比较重要的，也算是样式的特异性吧，尤其是在面对较多、较深层、较复杂的样式属性时，理解CSS的加权计算方法对于重写样式属性之类的问题都会迎刃而解。那么接下来我就把CSS的执行顺序及其优先权问题做一个小小的总结吧。

1、CSS的执行顺序

在说CSS的执行顺序之前首先让我们看一下CSS的几种使用方式：

·外联样式表

通过语句

<link rel="stylesheet" type="text/css" href="xxx.css"/>

导入CSS样式文件

·内联样式表

直接在<head></head>里面写入

<style type="text/css">
...
选择器{
...
属性:值;
...
}
...
</style>

内嵌样式表

直接在HTML里面写入CSS样式(虽然不提倡这么做，但在这里为了说明问题还是要提一下)，如：

<p class="test" style="width:200px;height:100px;font-size:12px;color:#0066cc;">
BeyondWeb.cn-记录与分享前端开发的点点滴滴
</p>

对于执行顺序很好理解，在html页面载入时元素是从上向下依次加载的，当然在css样式表里css代码也是从上向下、从左到右执行的，对于同样的选择器，后定义的样式会把先定义的样式覆盖掉（注意：这里说的是同样的选择器，如：先定义.test{color:red;}后定义.test{color:yellow;}，两个选择器都是类选择器”.test“）。

我们来看个小例子：

HTML代码：

<p class="test">
BeyondWeb.cn-记录与分享前端开发的点点滴滴
</p>

CSS代码：

.test{
color:red;
}

这时文字是红色的，那么我们如果在我们的样式表里后面的代码里有对.test进行了颜色控制，如：

... .test{
color:red;
}
... .test{
color:yellow;
}
...

此时文字就变成黄色了，原因就是下面定义的属性把上面的覆盖了。

另外对于外联样式表、内联样式表、内嵌样式表就看它们在html页面中的位置了，对于相同选择器控制的相同属性，哪一个样式表里面的属性最后执行就取哪里面的样式。

2、CSS的优先权

CSS2.1规范中定义了样式规则的计算方式，使用一个4位数字串来表示权重，每个选择器的权重决定了使用哪种样式，使用的规则有如下几种：

·元素的内联样式属性，加1,0,0,0

·每个id选择器，加0,1,0,0

·每个class选择器、属性选择器及伪类，加0,0,1,0

·每个元素及伪元素（如：firstchild）,加0,0,0,1

·提高权限，使用!important

然后，逐位数字相加，得到最终的数字串，按照从左到右的顺序逐位比较，一旦对应数字位比较出大小，那么谁大采用谁的规则，如下面几个demo：

Demo1:

规则1

.test h2{
color:red;//规则1
}

一个class选择器（取0010），一个html元素（取0001），相加得0011

规则2

h2{
color:red;//规则2
}

一个class选择器（取0001），最后还是0001通过两个样式的最终数字串比较得出结果：取样式1的规则

Demo2:

样式1

li.currentMenu
{
color:#333;
}

一个html元素（取0001），一个class选择器（取0010），相加得0011

样式2

ul li{
color:#666;
}

两个html元素（两个0001），相加得0002

通过两个样式的最终数字串比较得出结果：取样式1的规则。虽然有2>1，但它在从左到右第四位，在第三位比较时已经有1>0，所以无论后面的位数谁大谁小都视为无效。

对于!important，语法如下：

属性：值1 [值2,..值n] !important;

比如：

<p class="test">
BeyondWeb.cn-记录与分享前端开发的点点滴滴
</p>

...
.test{
color:red !important;//语句1
}
...
.test{
color:yellow;//语句2
}
...

最终字体的样式为红色red，因为!important提高了语句1的权限。

好了，以上就是我对于CSS执行顺序及其优先权的理解，就总结这么多吧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航