CSS3の予期しない動作CSSが上書きされない

CSS3を習得しようとしているときにこのコードが発生しました。結果のコードは次のとおりです：私は素晴らしい赤で書かれています。しかし、スタイルタグの最初の3行を使わないでコードを試してみたり、スタイルタグの5行目に！importantを追加すると、結果は次のようになります。誰も私にこの動作を説明することができます。CSS3の予期しない動作CSSが上書きされない

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #awesome .favorite:not(#awesome) .highlight { 
      color: red; 
     } 
     #awesome .highlight:nth-of-type(1):nth-last-of-type(1) { 
      color: blue ; 
     } 
    </style> 
    </head> 
    <body> 
    <ul class="shopping-list" id="awesome"> 
     <li> 
     <span>Milk</span> 
     </li> 
     <li class="favorite" id="must-buy"> 
     <span class="highlight">I am awesome</span> 
     </li> 
    </ul> 
    </body> 
</html>

出典

2016-12-28 user605505

エラー：「最初の3行なし」の場合、最初のルールはcolor：redと見なされますが、ブラウザには色以外にも適用される他のルールはありますか？ – BoltClock

しかし、なぜ2番目のルールが最初のルールを上書きしないのですか？ – user605505

このセレクタ：

#awesome .favorite:not(#awesome) .highlight

がこれより高い特異性があります。私の頭の上オフ

#awesome .highlight:nth-of-type(1):nth-last-of-type(1)

を、私はnth-of-typeまたはnot宣言が特異性をどのように影響するかがわかりませんしかし、大まかに、最初のクラスは2つのクラスを持ち、2つ目のクラスは1つしかないので、より具体的であるというのはちょっとした意味があります。

cssでは、より具体的なセレクタは、順序に関係なく特定のセレクタよりも優先されます。したがって、テキストは赤です。

もちろん、あなたが赤いクラスを取り除くと、青いものが最も特定的なものになるので、それは「勝つ」でしょう。 !importantを追加すると、青色の特異性が増しているため、赤色よりも特異的になり、「勝利」します。

出典

2016-12-28 18:23:41 nvioli

を除くすべての疑似クラス：not（）はクラスセレクタと同じ特異値を持ちます。：not（）は引数の特異性をとり、疑似クラスを数えません。 – BoltClock

それはあなたの特異性を引き受けることによって何を意味しますか？ – user605505

@ user605505：not（#awesome）の特異性は、#awesome - 1つのidセレクタと同じ特異性です。 – BoltClock

CSS3の予期しない動作CSSが上書きされない

答えて

関連する問題