网页css优先级为您详细解读

221 阅读 0 评论 146 点赞

我是靠谱客的博主幸福河马，最近开发中收集的这篇文章主要介绍网页css优先级为您详细解读，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。

首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascading Style Sheets）的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过程中我们经常需要用到。

其次：我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制作者的工作负担，从而减轻制作及后期维护的代价。

其实现在还来讲CSS是什么，CSS有什么作用完全是多余的，相信从事网页制作的朋友都已经或多或少的接触过了。

言归正传，我们开始进入今天的话题：

一、什么是CSS优先级？

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

二、CSS优先级规则

既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

统计选择符中的ID属性个数。
统计选择符中的CLASS属性个数。
统计选择符中的HTML标记名个数。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

例如：

每个ID选择符(#someid)，加 0,1,0,0。
每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
每个元素或伪元素(:firstchild)等，加0,0,0,1。
其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。

三、特性分类的选择符列表

以下是一个按特性分类的选择符的列表：

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	2
.apple {color:red;}	10
p.bright {color:yellow;}	11
p.bright em.dark {color:brown;}	22
#id316 {color:yellow}	100

单从上面这个表来看，貌似不大好理解，下面再给出一张表：

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	1+1=2
.apple {color:red;}	10
p.bright {color:yellow;}	1+10=11
p.bright em.dark {color:brown;}	1+10+1+10=22
#id316 {color:yellow}	100

通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

优先级问题其实就是一个冲突解决的问题，当同一个元素（内容）被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。

说到这里，我们不得不说一下CSS的继承性。

网页中加载多个css样式文件，其中一个是Ext库自带的样式文件，里面对所有标签定义了一些样式，导致原有网页显示不正确。通过找到对应样式，重新设置了正确的样式。将新样式加到body标签上，但是出现两个样式，Ext样式仍然有效。最后发现时在设置新样式的时候没有加*，导致只对body标签有用，而对子标签无效。下面为修改后的样式

复制代码

代码如下:

.diy,
.diy *{
box-sizing: content-box;
-moz-box-sizing : content-box;
-webkit-box-sizing: content-box;
}

当一个标签被定义多个样式，而样式之间出现冲突时，优先级为“针对ID定义的样式” > “类定义样式” > “针对标签类型定义的样式”。例如下面几个样式

复制代码

代码如下:

div{
border:2px solid #0000FF;
}
.powerHeader{
border:2px solid #00ff00;
}
#navigation{
border:2px solid #ff0000;
}

在标签<div id="navigation" class="powerHeader">，首先应用的是#navigation，当#navigation不存在时应用.powerHeader样式，最后才是div样式。
同时，单使用link或style定义多个标签类class之间出现冲突时，会应用定义在最后的那个类。
了解css样式优先级，能够在网页开发中避免许多样式冲突问题。