代码之家 › 专栏 › 技术社区 › Prajeet Shrestha

CSS样式优先级混淆[重复]

web-frontend angular html css

Prajeet Shrestha · 技术社区 · 9 年前

.wrapper > * {
    background: deepskyblue;
}

.item {
    background: deeppink;
}

HTML

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

上面是我的CSS类和HTML。既然我给了包装下面的.item类样式>*在这里

应该是深粉色的吗?

1 回复 | 直到 9 年前

chazsolo 9 年前

要理解为什么你没有看到你想要的结果,你首先需要理解 CSS Specificity 以及权重选择器有哪些(作为这个问题的答案,讨论太长了)。

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

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

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

推荐文章