CSS权重

优先级：

!important > 内链 > ID > 类 > 标签|伪类|属性选择器 > 伪对象 > 继承 > 通配符

 

注释：

1. !important

<style>

　　.classname {height:100px !important;}

</style>

2. 内联

<div style="display:block;color:#000;..."></div>

 3. ID

<style>
　　#elemid {height:100px}
</style>

 4. 类

<style>
　　.classname {height:100px;}
</style>

 5. 标签

<style>
　　div {height:100px;}
</style>

 6. 伪类

<style>
　　.classname:hover {height:100px;}
　　.classname:focus {height:100px;}
　　... ... ...
</style>

7. 属性选择器 

<style>
　　.classname[id='elem'] {height:100px;}
</style>
/*
E[attr]　　　　　　　　 只有属性名
E[attr="value"]　　　　 指定属性值
E[attr~="value"]　　　　属性值为词列表，以空格分隔，其中包含“value” eg.<div attr="attr1 value attr2"></div>
E[attr^="value"]　　　　属性值以“value”开头
E[attr|="value"]　　　　属性值以“value-”开头（eg.<div attr="value-attr"></div>）或值为“value”
E[attr*="value"]　　　　属性值包含“value”
E[attr$="value"]　　　　属性值以“value”结尾
*/

 8. 伪对象

<style>
　　.classname::after {height:100px;}
　　.classname::before {height:100px;}
　　... ... ...
</style>
/* ::after/::before/::first-line/::first-letter/::selection */