面试题准备（二十）：CSS 样式权重

概述

样式的权值决定了样式展示的顺序

选择器	权重
!important	Infinity
行间样式	1000
id	100
class|属性|伪类	10
标签|伪元素	1
通配符	0

权重特点

计算

/*计算下列权重*/
.wrapper > input:first-child {
	background-color: #888; /* 10 + 1 + 10 = 21 */
}

.content #name[class^="val"]::before {
	content: ""; /* 10 + 100 + 10 + 1 = 121 */
	display: inline-block;
	clear: both;
}

重复样式会被覆盖

写了同样的样式，顺序靠后的生效

.content {
	background-color: #888; 
}
.content {
	background-color: #666; /* 这条会覆盖上面的 */
}

高权重覆盖低权重

重复的样式，权重高的会覆盖掉低权重的

/* weight: 10 */
.content {
	background-color: #888; 
}

/* weight: 20 */
.wrapper .content {
	background-color: #666; /* 这条会覆盖上面的 */
}

!important

!important 可将样式权重改为无穷，但在对复合样式进行使用时，会对其中的所有子样式都加上 !important，变得不可控，不建议使用

内联与外联样式的优先级

内联样式与外联样式在权重一样的情况下，执行的顺序会影响渲染的结果，顺序靠后的样式会生效

• 外联样式靠后
  
• 内联样式靠后
  

运用于非目标标签

两个样式同时以继承的的方式作用于非目标标签时，按就近原则渲染标签

总结

1. 常用选择器优先级：!important > id > class > tag
2. 两条样式同时使用 !important 权重高者生效
3. 同一个样式，靠后的生效
4. 选择器指向同一个元素，权重相同时，按就近原则渲染
5. 选择器指向不同元素，按就近原则渲染

参考文献

你必须懂的css样式权重和优先级 - King的文章 - 知乎