CSS 样式优先级混乱
CSS style priority confusion
CSS
.wrapper > * {
background: deepskyblue;
}
.item {
background: deeppink;
}
HTML
<div class="wrapper">
<div class="item">
Test
</div>
</div>
以上是我的CSSclass和HTML。因此,由于我在包装 > * 下方为 .item class 提供了样式。
但是项目的背景仍然是深蓝色。
应该是深粉色吗?
我知道我可以在 .item 中使用 !important 来获得深粉色,但我想知道为什么会按此顺序发生。
要了解为什么看不到您想要的结果,您需要首先了解 CSS Specificity 以及权重选择器具有什么(作为此问题的答案,讨论时间太长)。
首先,您的原始规则集:
.wrapper > * { // [0,0,0,1,0]
background: deepskyblue;
}
.item { // [0,0,0,1,0]
background: deeppink;
}
这两个规则都具有 [0,0,0,1,0]
的特异性,因为每个选择器中只有一个 class。 *
选择器的权重为 0,因此它不会向第一条规则添加任何权重。由于这两个规则影响同一元素上的相同 属性,因此 最后 的规则获胜:在这种情况下,background: deeppink;
但是,您的实际规则不同:
.wrapper[_ngcontent-c1] > *[_ngcontent-c1] { // [0,0,0,3,0]
background: deepskyblue;
}
.item[_ngcontent-c1] { // [0,0,0,2,0]
background: deeppink;
}
在这种情况下,第一个规则获胜,因为它更具体。属性选择器的权重为 [0,0,0,1,0]
.
要解决这个问题,您必须制作一个等于或超过要覆盖的规则的特异性的选择器。
例如:
.wrapper[_ngcontent-c1] > *[_ngcontent-c1] { // [0,0,0,3,0]
background: deepskyblue;
}
.wrapper[_ngcontent-c1] > .item[_ngcontent-c1] { // [0,0,0,4,0]
background: deeppink;
}
CSS
.wrapper > * {
background: deepskyblue;
}
.item {
background: deeppink;
}
HTML
<div class="wrapper">
<div class="item">
Test
</div>
</div>
以上是我的CSSclass和HTML。因此,由于我在包装 > * 下方为 .item class 提供了样式。
但是项目的背景仍然是深蓝色。
应该是深粉色吗?
我知道我可以在 .item 中使用 !important 来获得深粉色,但我想知道为什么会按此顺序发生。
要了解为什么看不到您想要的结果,您需要首先了解 CSS Specificity 以及权重选择器具有什么(作为此问题的答案,讨论时间太长)。
首先,您的原始规则集:
.wrapper > * { // [0,0,0,1,0]
background: deepskyblue;
}
.item { // [0,0,0,1,0]
background: deeppink;
}
这两个规则都具有 [0,0,0,1,0]
的特异性,因为每个选择器中只有一个 class。 *
选择器的权重为 0,因此它不会向第一条规则添加任何权重。由于这两个规则影响同一元素上的相同 属性,因此 最后 的规则获胜:在这种情况下,background: deeppink;
但是,您的实际规则不同:
.wrapper[_ngcontent-c1] > *[_ngcontent-c1] { // [0,0,0,3,0]
background: deepskyblue;
}
.item[_ngcontent-c1] { // [0,0,0,2,0]
background: deeppink;
}
在这种情况下,第一个规则获胜,因为它更具体。属性选择器的权重为 [0,0,0,1,0]
.
要解决这个问题,您必须制作一个等于或超过要覆盖的规则的特异性的选择器。
例如:
.wrapper[_ngcontent-c1] > *[_ngcontent-c1] { // [0,0,0,3,0]
background: deepskyblue;
}
.wrapper[_ngcontent-c1] > .item[_ngcontent-c1] { // [0,0,0,4,0]
background: deeppink;
}