css中权重与优先级

注：本文已发布超过一年，请注意您所使用工具的相关版本是否适用

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

选择器的权重

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

权重表

选择器例子权重值
内联样式style=''1000
id选择器#title100
类，伪类，属性选择器.title，:hover ,a[href]10
类型选择器，伪元素选择器p, :before1
通用选择器，子选择器和相邻同胞选择器*,>,+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，从而提高它的特殊性。看看能不能解决问题

关注我获取更新

wechat
知乎
github

猜你喜欢

程序
css

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处，禁止全文转载