css - Do parent selectors take precedence over child selector in CSS?

Question

I had a question about how CSS selectors work between parent and children, and which one would take precedence over the other.

<div class="red">
  <div class="blue">
    <div class="green">
    </div>
  </div>
</div>

If you then have

   .red .green{
    border: 1px solid red;
    }

    .blue .green{
    border: 1px solid blue;
    }

Which one would take effect? And to override a CSS style does it have to be as specific a selector as the one you're trying to override?

score 5 · Accepted Answer

あなたは特異性について読むべきです。

差し迫った質問に答えるために、すべてのセレクターは同じ特異性を持っているため、の場合.green、最後のルールが優先されます: 境界線は青になります。

score 0 · Accepted Answer

親セレクターは、値が割り当てられていないタグ内のすべてを包含します。したがって、2番目のケースでは、そこにテキストまたは画像を追加したいと考えていましたが、そのクラスに沿って続きます。3番目も同じことをします。数学の方程式と括弧のように考えてください。

5×4×（3×3）＝180

最初に括弧を実行してから、他の要因を実行します。

3 に答える 3