CSS 优先级

2016-05-12 本文已影响51人 hcxowe

概念

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级基于由各种选择器组成的匹配规则。

样式的优先级

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下：
（外部样式） <（内部样式） <（内联样式）

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

选择器的优先权

Paste_Image.png

解释：

内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
<html>
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 /
color:#F00; / 红色 /
}
#redP .red em {
/ 权值 = 100+10+1=111 /
color:#00F; / 蓝色 /
}
#redP p span em {
/ 权值 = 100+1+1+1=103 /
color:#FF0;/黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red

<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
最后结果为：
Paste_Image.png

优先级法则

选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
继承的CSS 样式不如后来指定的CSS 样式；
在同一组属性设置中标有!important规则的优先级最大

修改样式

<style type="text/css">
        #redP p {
            /* 权值 = 100+1=101 */
            color:#F00;  
        }
        #redP .red em {
            /* 权值 = 100+10+1=111 */
            color:#00F; 
        }
        #redP p span em {
            /* 权值 = 100+1+1+1=103 */
            color:#FF0 !important;
        }
</style>

则结果为：

Paste_Image.png

!important

当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明。使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

一些经验法则：

Never 永远不要在全站范围的 css 上使用 !important
Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
Never 永远不要在你的插件中使用 !important
Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important

取而代之，你可以：

善用 CSS 的级联属性
使用更多具体的规则。比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级：
<div id="test"> <span>Text</span></div>
#test span { color: green }span { color: red }div span { color: blue }
无论你css语句的顺序是什么样的，文本都会是绿色的(green)，因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）

怎样覆盖掉 !important

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

CSS 优先级

概念

样式的优先级

选择器的优先权

解释：

优先级法则

!important

猜你喜欢

热点阅读