CSS样式优先混乱

CSSCSS样式优先混乱

.wrapper > * { 
    background: deepskyblue; 
} 

.item { 
    background: deeppink; 
}

HTML

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

以上是我的CSS类和HTML。所以，因为我给了wrapper> *下面的.item类的样式。

但物品的背景仍然越来越deepsky蓝色。

它应该是deeppink？

我知道我可以在.item中使用！important来获得它的重要性，但为什么按照这个顺序发生这是我想知道的。

来源

2017-08-09 Prajeet Shrestha

您所提供的代码呈现一个'deeppink'背景：https://jsfiddle.net/qxvttLyh/ – chazsolo

检查此链接http://ccm.net/faq/30797- css-priority-rules-weight，你会知道如何计算权重 – demo

必须有其他选择器影响值。尝试使用浏览器的开发者工具（通常是'F12'键）检查结果，看看它会对它产生什么影响... –

要明白你为什么没有看到你想要的结果，你有必要先了解CSS Specificity什么重量选择有（其中一个太长的讨论为这个问题的答案）。

首先，你原来的一套规则：

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

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

这些规则两者都有，因为每个选择中的单一类的[0,0,0,1,0]特异性。 *选择器的权重为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; 
}

来源

2017-08-09 15:17:28 chazsolo

我读了关于CSS特殊性规则，所以它就像[样式属性，ID，类 - 伪类属性，元素]，因此[0,0,0,0]为什么在您的特定性计算中有5 0？ –

我在过去看到过5个例子，用'！important'表示一个规则，就像在视觉中添加'[1,0,0,0,0]''一样。我习惯于这样写。 – chazsolo

明白了！ Thanx @chazsolo，这是有帮助的:) –

CSS样式优先混乱

回答

相关问题