本文主要介绍浏览器如何确定CSS优先级，您需要的朋友可以参考。





概念
浏览器通过判断优先级决定哪个属性值与元素最相关，然后应用到元素上。优先级由选择器组成的匹配规则决定。

如何计算
优先级是基于由每个选择器类型组成的字符串级联。它不是与相应匹配表达式相对应的权重值。

如果优先级相同，元素最终将在CSS中应用后面的声明。

注意：文档树中的距离不受元素优先级计算的影响。（可以在文档中看到DOM树中的距离的一个例子）。

优先顺序
下面是逐步增加选择器的列表：

一般选择*
元素（类型）选择器
类选择器
属性选择符
伪类
ID选择器
内联样式
事实上，元素也可以继承父元素中的一些样式，比如颜色，这些继承样式的优先级总是低于元素本身的样式，包括一般选择器：


复制代码代码如下所示：

文本

{ *
颜色：红色；
}

#测试{
颜色：蓝色；
}


最后，文本的颜色是红色的。

重要的规则是例外。
什么时候!重要规则应用于样式声明中，语句将覆盖任何其他语句的CSS样式，不管它在声明列表中处于什么位置。但是，使用重要的规则和关系！或没有优先权！重要的是一种不好的习惯，因为它改变了你的样式表的级联的原始规则，使得它很难调试。

一些不成文的规则

不要在全站范围内使用CSS！Important.

只有当CSS需要覆盖全范围或外部CSS（如参考ExtJS或YUI）是用来指定网页！重要。

不要在插件中使用它！重要。

优先考虑使用样式规则来解决问题总是优先考虑的！重要。

相反，你可以：

更好地利用CSS的级联属性

使用更合适的选择器。例如，在需要选择对象元素之前添加更多元素，使选择范围变小，并且选择器将变得更有针对性，从而改进优先级。


复制代码代码如下所示：

文本


DIV #测试跨度{颜色：绿}
跨度{颜色：红色}
分区跨度{颜色：蓝色}


不管CSS语句的顺序是什么，文本都是绿色（绿色），因为规则是最特殊的和最高优先级的（同样的，不管语句的顺序是什么，蓝色（蓝色）的规则将覆盖红色（红色）的规则）。

应该什么时候用：
（a）情况

有一个CSS文件在你的网站上设置全站风格。同时，您（或您的同事）编写了一些通常非常不符合线型的效果（行样式优先级最高）。

在这种情况下，可以在全局CSS文件中编写一些重要的样式，以覆盖直接写入元素的内部行。

例如，一个活生生的例子是某人在jQuery插件中编写了一个糟糕的内部样式。

B）另一案件


复制代码代码如下所示：
# someelement p {
颜色：蓝色；
}

p.awesome {
颜色：红色；
}


你怎么能让可怕的段红在外层# someelement在这种情况下，如果你不使用它！重要的是，第一条规则总是高于第二条规则的优先级。

如何掩盖！重要

很简单，只需要添加一个CSS语句！重要的是，它将应用于更高优先级的选择器（在原始的基础上添加额外的标记、类或ID选择器）；或者保留相同的选择器，但在原始语句中添加位置（在表面将覆盖前面定义后面相同条件下的优先级定义之后，）。


复制代码代码如下所示：

文本



你想把原来的绿色文本变成红色，这是提高优先级的方法：


复制代码代码如下所示：
#测试，{
颜色：红色！重要；
}
一个{
颜色：绿色！重要；
}

然而

复制代码代码如下所示：
一个{
颜色：绿色！重要；
}
一个{
颜色：红色！重要；
}