CSS 样式优先级混乱

Question

CSS

.wrapper > * {
    background: deepskyblue;
}

.item {
    background: deeppink;
}

HTML

<div class="wrapper">
  <div class="item">
    Test
  </div>
</div>

以上是我的CSSclass和HTML。因此，由于我在包装 > * 下方为 .item class 提供了样式。

但是项目的背景仍然是深蓝色。

应该是深粉色吗？

我知道我可以在 .item 中使用 !important 来获得深粉色，但我想知道为什么会按此顺序发生。

Answer 1

要了解为什么看不到您想要的结果，您需要首先了解 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 样式优先级混乱

CSS style priority confusion

css

html

angular

web-frontend