CSS样式优先级

关于CSS优先级

一般情况下，优先级如下：

如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况时，优先级如下：
（内联样式）Inline style >（内部样式）Internal style sheet >（外部样式）External style sheet

同一样式文件中，优先级由选择器的匹配规则来决定。
内联 > ID选择器 > 伪类=属性选择器=类选择器 > 元素选择器【p】 > 通用选择器(*) > 继承的样式

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

<style type="text/css">
	  /* 内部样式 */
	  h3{color:green;}
</style>

<!-- 外部样式 style.css --> <!-- 设置：h3{color:blue;} -->
<link rel="stylesheet" type="text/css" href="style.css"/>


<body>
    <h3>测试！</h3>
</body>

如何查看优先级

浏览器打开开发者界面（F12），在Firebug中查看优先级。Firebug中按照优先级排序显示规则，将优先级更高的规则显示在最上面，并将被覆盖的规则用删除线划掉。

优先级的计算

权重如图所示：

miho

Note:

ID选择器「如：#header」，Class选择器「如：.foo」，属性选择器「如：[class]」，伪类「如：:link」，标签选择器「如：h1」，伪元素「如：:after」，选择器「*」

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

优先级计算无视DOM树中的距离

<style type="text/css">
	body h1 {
	  color: green;
	}
	html h1 {
	  color: purple;
	}
</style>


<body>
	<div id="further">
	<div id="close">
	   <h1>Here is a title!</h1>
	</div>
	</div>
</body>

因为css中优先级无视DOM树中节点的距离远近，因为body h1和html h1的优先级相同，都属于继承，离的近的优先级高，因此就算使用#close和#further来进行改变，文字也是绿色的。

伪类选择器，属性选择器和class选择器的优先级一样

<style type="text/css">
    :focus {
        color: red;
    }

    [class] {
        color: blue;
    }

    .classtest {
        color: green;
    }
</style>


<body>
<div class="classtest">
    什么颜色文字
</div>
</body>

哪一个在最后，哪一个就生效！

基于类型的优先级

<style type="text/css">
* #foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}
</style>


<body>
<p id="foo">I am a sample text.</p>
</body>

属性选择器尽管选择了一个ID但是在优先级计算中还是根据类型计算，因此即使选择的是相同的元素，但ID选择器有更高的优先级，所以* #foo设置的样式生效。

：not伪类不参与优先级计算

：not否定伪类在优先级计算中不会被看做是伪类，但是，会把:not里面的选择器当普通选择器计数。这句话有点不好理解，其实就是忽略掉:not，其他伪类(如:hover)参与CSS优先级的计算，但是:not不参与计算。

<style type="text/css">
	div.outer p {
	  color:red;
	}

	div:not(.outer) p {
	  color: blue;
	}
</style>

<body>
<div class="outer">

  <p>This is in the outer div.</p>

  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>

</div>
</body>

选择器div.outer p和选择器div:not(.outer) p的优先级是相同的，:not被忽略掉了，:not(.outer)中的.outer正常计数。而如果调换位置，inner元素会变成红色。

!import

不建议使用!import!!!

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

选择元素时尽量不要多选，不要放宽选择器的范围。因为范围越小，越具有针对性，优先级越高。

使用!import的场合

在没有别的解决方案的时候。比如需要覆盖内联样式，因为内联样式的优先级最高，只能用!import去覆盖内联样式。
还有一种情况

<style type="text/css">

#someElement p {
    color: blue;
}

p.awesome {
    color: red;
}

</style>

<body>
	<div id="someElement">
		<p class="awesome">some text</p>
	</div>
</body>

在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用 !important ，第一条规则永远比第二条的优先级更高。这也是没有别的办法，如果用内联结果只会更糟糕

覆盖已有的!import规则

再加一条!import的css语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、类或者ID选择器）。
1
2
3
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
选择器一样，但添加的位置在原有声明后面。因为相同优先级，后边定义的声明覆盖前面的。
1
2
td {height: 30px !important;}
td {height: 50px !important;}