css权重优先级二进制 |js 输出 css

CSS权重优先级中有四个级别，其中元素的数量最高，后面三个则是块、类和ID。每个等级都有自己的基数：

- 元素：1
- 类，伪类：10
- ID：100
- 行内样式：1000

优先级的计算是通过将所有规则的基数相加来完成的。例如，对于以下规则：

p {
color: white;
}
#headline {
color: blue;
}

在这种情况下，ID选择器的权重等于100，元素选择器的权重等于1。因此，ID选择器的优先级较高，应用文本颜色为蓝色。

如果两个规则具有相同的权重，则后面的规则具有更高的优先级。例如：

p {
color: white;
}
p {
color: blue;
}

在这种情况下，第二个规则的优先级更高，应用了文本颜色蓝色。

在计算优先级时，还需要考虑子选择器和直接后代选择器的影响。直接后代选择器的优先级比子选择器的优先级更高，这是因为直接后代选择器的基数更高。例如：

div p {
color: white;
}
div >p {
color: blue;
}

这里，直接后代选择器的权重为2，而子选择器的权重为1。因此，直接后代选择器的样式优先级更高，将文本颜色设置为蓝色。

最后，请注意，在处理行内样式时，CSS优先级的规则是相同的。这意味着行内样式的优先级始终是最高的，因此将覆盖所有其他选择器中指定的样式。