CSS样式优先混淆

Question

CSS

.wrapper > * {
    background: deepskyblue;
}

.item {
    background: deeppink;
}

HTML

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

上面是我的CSS类和HTML。因为我已经在包装器＆gt;下面给了.item类的样式了。 * 这里。

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

它应该深思吗？

我知道我可以在.item中使用！important来深化它但是为什么这个顺序发生的事情就是我想知道的。

Answer 1

要理解为什么你没有看到你想要的结果，你需要先了解CSS Specificity以及选择器的重量（这个问题的答案太长了）。< / p>

首先，您的原始规则集：

.wrapper > * { // [0,0,0,1,0]
  background: deepskyblue;
}

.item { // [0,0,0,1,0]
  background: deeppink;
}

由于每个选择器中的单个类，这两个规则都具有[0,0,0,1,0]的特异性。 *选择器的权重为0，因此它不会为第一个规则添加任何权重。由于两个规则都影响同一元素上的相同属性，因此 last 的规则获胜：在这种情况下，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;
}