css层叠性冲突中的优先级

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一.首先从CSS级别来进行优先级划分：

CSS控制页面样式的四种方法：

1.行内样式

通过style特性

2.内嵌方式

将CSS代码写在head和/head之间,并用style进行声明

3.链接方式

4.导入方式

导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。(这个目前没遇到过)

四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式

目前有个疑问：如果内嵌定义了p,链接定义了a,那么内嵌应该不会覆盖链接吧？

二.从CSS内部进行优先级划分

CSS通过一个叫做层叠（cascade）的过程处理这种冲突。层叠给每个规则分配一个重要程度指数。作者定义的样式具有最高的重要性指数，其次是用户定义的样式。但是为了增强用户的控制能力，用户可以通过为任何规则增加一个!important来提高它的重要性指数，让它的优先级高于任何规则，甚至是比作者的!important还要高。
因此，层叠重要性指数的次序依次为：

标记为!important的用户样式
标记为!important的作者样式
作者样式
用户样式
浏览器/用户代理的默认样式

默认样式的选择器的优先指数由选择符对应的数值相加而成，数值越高，优先级越高。

CSS中的选择符有四类：

行内样式（Inline Style），如<span style="color:red">...</span>
ID选择符（ID selectors），如#myid
类、属性选择符、伪类（Classes, attributes and pseudo-classes），如 .class {...}、[href$=dudo.org]、:hover
元素（elements)、伪元素选择符(pseudo-elements)，如 p {...}、:first-line {...}
通配符选择器，即*，为0
继承来的，最低。

行内样式为：1000
ID选择符为：0100
类选择符为：0010
元素样式为：0001

例如，body #wrap p {...}，那么它的优先级指数就是 1 100 1=102，而body div#wrap p {...}的优先级指数就是 1 1 100 1 =103。

三.继承产生的冲突

血缘越近的优先级越高,父继承比爷爷继承优先级高.

浏览器的控制台是很好的参考工具,而且会详细帮你划掉冲突中被排除的规则.

比如如下：

2的颜色还是会是蓝色，因为继承的权重最低。

即使将span改为*，也还是蓝色，继承的权重比*还低。

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{color:blue;}
body div.red{color: red;}
</style>
</head>
<body>
<div class="parent">
<div class="red">1</div>
<div class="blue"><span>2</span></div>
</div>

参考：

http://www.jb51.net/css/6773.html

http://www.cnblogs.com/liwon/p/3526369.html