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樣式優先混亂

回答

相關問題