9.25日音讯，css优先级如何通过浏览器展示

　　9.25日音讯，css优先级如何通过浏览器展示。我们都知道在实际网站运用中css是有优先级别的，同样的属性相同的类名，因为优先级的不同而产生很大的变化，优先级是根据由每种选择器类型构成的级联字串计算而成的，它不是一个对应相应匹配表达式的权重。

　　如果优先级相同,元素最终会应用CSS中靠后的声明.

　　注意:在文档树中的距离是不会对元素优先级计算产生影响的.（可以看文档中无视DOM树中的距离的例子）

　　优先级顺序

　　下列是一份优先级逐级增加的选择器列表:

　　通用选择器*

　　元素(类型)选择器

　　类选择器

　　属性选择器

　　伪类

　　ID选择器

　　内联样式

　　事实上，元素还可以从父元素上继承一些样式，如color等属性。这些继承的样式的优先级永远低于元素本身的样式，包括通用选择器：

　　代码如下:

　　text

*{

　　color:red;

　　}

　　#test{

　　color:blue;

　　}

　　最终text的颜色是红色的。

　　!important规则是例外

　　当!important规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明,无论它处在声明列表中的哪个位置.尽管如此,!important规则还是与优先级毫无关系使用!important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。

　　一些不成文规则

　　不要在全站范围的css中使用!important.

　　只在需要覆盖全站范围的css或是外部css（例如引用的ExtJs或是YUI）的时候才在指定的页面上使用!important。

　　不要在你的插件中使用!important。

　　永远都要优先考虑使用样式规则的优先级来解决问题而不是!important。

　　取而代之，你可以:

　　更好的利用CSS的级联属性

　　更多的使用适合的选择器。比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级：

　　无论你c​ss语句的顺序是什么样的，文本都会是绿色的(green)因为这一条规则是最有特殊性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）

　　什么时候应该使用：

　　A)一种情况

　　你的网站上有一个设定了全站样式的CSS文件，同时你（或是你同事）写了一些效果通常都是很差的行内样式（行内样式的优先级是最高的）。

　　在这种情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。

　　活生生的例子比如：有人在jQuery插件里写了糟糕的行内样式。

　　B)另一种情况

　　在外层有#someElement的情况下，你怎样能使awesome的段落变成红色呢？这种情况下，如果不使用!important，第一条规则永远比第二条的优先级更高。

　　怎样覆盖掉!important

　　很简单，你只需要再加一条!important的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、class或id选择器）上；或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。