CSS 权重问题

权重等级

• 行内内嵌样式

行内样式包含在你的 html 标签中 对你的元素产生直接作用，权重最大，但是不能声明伪类样式

<div style="position:absolute;color:red;">test</div>

• ID 选择器

ID 一般用来作为元素的唯一标识，权重第二

• 类选择器、属性选择器、伪类选择器

属性选择器：针对标签中的属性的选择器（这个形容有点书面，具体自己理解）

/* 设置 input 标签中 title 为 test 的标签字体颜色 */
input[title="test"] {
    color:#39f;
}

伪类选择器：link、visited、hover、active（注意：对链接设置样式，必须注意顺序）

.tes:hover{
    color: #39f;
}

• 元素选择器，伪元素选择器

伪元素选择器：

/* 伪元素选择器 */
::after
::before
::first-letter
::first-line
::selecton

具体权重

选择器	权重
行内元素样式	1000
ID 选择器	100
类、伪类、属性选择器	10
元素、伪元素选择器	1
通配符 *	0

 下面的栗子是转自《你应该知道的一些事情——CSS权重》，可以自行测试一下

*{}                         ====》0
li{}                        ====》1(一个元素)
li:first-line{}             ====》2(一个元素，一个伪元素)
ul li {}                    ====》2（两个元素）
ul ol+li{}                  ====》3（三个元素）
h1+ *[rel=up] {}            ====》11（一个属性选择器，一个元素）
ul ol li.red{}              ====》13（一个类，三个元素）
li.red.level{}              ====》21（两个类，一个元素）
style=""                    ====》1000(一个行内样式)
p {}                        ====》1（一个元素）
div p {}                    ====》2（两个元素）
.sith {}                    ====》10（一个类）
div p.sith{}                ====》12（一个类，两个元素）
#sith{}                     ====》100（一个ID选择器）
body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

权重计算规则

• 相同权重，依据最后一个选择器为准
• 不同权重，权重最高的选择器为准
• 就近法则，与元素“挨得近”的规则生效

/* CSS 文件中 */
.test {
    color: #ccc;
}

/* HTML 文件中 */
<style>
    .test {
        color: #39f;
    }
</style>

/* 此时样式依据 HTML 文件中的选择器计算，元素字体颜色为 #39f */

• 后面定义的样式会覆盖之前的样式
• 无论多少个元素选择器，权重都不会超过一个类选择器，其他的类比

注意事项

• 设置链接样式，注意 link、visited、hover、active 的顺序
• 减少选择器个数，选择器嵌套不宜太深，因为 CSS 匹配是从选择器右到左
• 避免使用 !important ，“!important”会覆盖所有的样式规则，会使之前的样式都失效
• 适当使用 ID 选择器，增加权重

参考文章

《你应该知道的一些事情——CSS权重》（文章大多数参考此文章，其他是一些自己的笔记）