选择器优先级

[Twlig]

选择器优先级

当通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突。发生样式冲突时，应该应用哪个样式由选择器的权重决定。

单个选择器

!important > 内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承的样式

div {
    color: red !important;
}
.blue {
    color: blue;
}
<div class="blue">blue</div>  /*显示为红色*/

选择器叠加

div.blue {
    color: blue;
}
.blue {
    color: red;
}
<div class="blue">blue</div>  /*显示为蓝色*/