css中权重与优先级

今天在写一个前端文件的时候发现有一个样式突然没有了作用,但是按照优先级来说应该后面的前面的才对。
然后研究了一下css当中的优先级到底是怎么回事,才发现原来都是权重的锅

选择器的权重

分为四个等级,权重值越大表示优先级别越高

权重表

选择器 例子 权重值
内联样式 style='' 1000
id选择器 #title 100
类,伪类,属性选择器 .title,:hover ,a[href] 10
类型选择器,伪元素选择器 p, :before 1
通用选择器,子选择器和相邻同胞选择器 *,>,+ 0

一个例子

sytle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*权重=100+1=101*/
#title h2{
color:red;
}

/*权重=10+1=11*/
.content h2{
color:blue;
}

/*权重=100+1=101*/
#title a{
color:orange;
}

/*权重=100+10=110*/
#title a[href]{
color:green;
}

html

1
2
3
4
5
6
7
8
<div id="title">
<h2>我是标题</h2>
<div class="content">
<h2 style="color:#333;">我是内容</h2><!--权重=1000-->
<a href="http://lxl520.com">lxl520</a>
<a>0...0</a>
</div>
</div>

层叠原理(或者说是就近原则

当两个样式的优先级一样时,会自动选择最近的一条样式

1
2
3
4
5
6
7
8
9
<style>
#title{
color:red;
}
#title{
color:blue;
}
</style>
<h2 id="title">我到底啥颜色</h2>

例外(!important)

在属性的后面加上!important可以用来提权,就好比直接获得管理员权限一样,这这个属性会变成最高优先级

1
2
3
4
5
6
<style>
h2{
color:red !important;
}
</style>
<h2 style="color:blue;">我想必应该是蓝色</h2>

注意

  1. 一些不成文规则

    • 不要在全站范围的css中使用!important.
    • 只在需要覆盖全站范围的css或是外部css(例如引用的ExtJs或是YUI)的时候才在指定的页面上使用!important
    • 不要在你的插件中使用!important
    • 永远都要优先考虑使用样式规则的优先级来解决问题而不是!important
  2. 如果你和我一样遇到了似乎没有起作用的CSS规则,请试试在你的选择器中添加他的一个父元素的ID,从而提高它的特殊性。看看能不能解决问题