CSS样式优先级混乱

CSS

.wrapper > * {
    background: deepskyblue;
}

.item {
    background: deeppink;
}

HTML

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

试验

上面是我的CSS类和HTML。因此，因为我在包装器>*下面给出了.item类的样式

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

应该是深粉色的吗

我知道我能用！重要的。项目，以获得它深粉红色，但为什么会发生这种情况，在这个顺序是我想知道的

---

要理解为什么你看不到想要的结果，你需要首先了解权重选择器有什么（作为这个问题的答案，讨论的时间太长了）

首先，您的原始规则集：

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

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

由于每个选择器中只有一个类，因此这两个规则都有一个特殊性

[0,0,0,1,0]

。

*

选择器的权重为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;
}

您提供的代码呈现一个
deeppink
背景：检查此链接，您就会知道权重是如何计算的。必须有其他选择器影响这些值。尝试使用浏览器的开发工具（通常是
F12
key）检查结果，看看是什么影响了结果…@chazsolo，这是一个更大的问题。在JSFIDLE中，它似乎起了作用。我在一个组件中使用它，Angularv4把它搞乱了吗？请参阅我问题中的附加屏幕截图。属性选择器为您的规则添加了特殊性。
*
选择器没有任何权重，但是添加了
[\u ngcontent-c1]
它就有了权重，这就是为什么它覆盖了我读到的关于css特定性规则的不太具体的规则，所以它像[Style-attribute，ID，Class-Pseudo-Class-attribute，Element]，所以[0,0,0]为什么在您的特定性计算中有5 0？我在过去看到过一些示例，其中有5，表示带有
的规则！重要信息
，将
[1,0,0,0,0]
添加到特异性中，就像视觉效果一样。我习惯了这样写，明白了！Thanx@chazsolo这很有帮助：）