[CSS] Inheritance, Cascading Style Sheets, Specificity

7641 ワード
テキストリンク

継承


継承とは、親(親、親、祖先)要素に適用される構成を子(子、子)要素に継承することです.継承機能がない場合は、各要素のルールセットにpropertyを毎回指定する必要があります.
しかし、すべての番組が引き継がれるわけではない.「これは、特定のコンテナ規則が子に適用されることを意味します.」「特定」を覚えます.
継承できないものがたくさんあるので、継承できる番組しか見ません.
  • visibility
  • opacity
  • font
  • color
  • line-height
  • text-align
  • white-space
    • colorは継承されたpropertyであり,サブエレメントだけでなくサブエレメントにも適している.ここでは、inheritキーワードを使用して、継承されていない要素または属性を明示的に継承できます.
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    .text-red {
      color: red;
      border: 1px solid #bcbcbc;
      padding: 10px;
    }
    .text-red button {
      color: inherit;
    }
    .text-red p {
      border: inherit;
      padding: inherit;
    }
  </style>
</head>
<body>
  <div class="text-red">
    <h1>Heading</h1>
    <p>Paragraph<strong>strong</strong></p>
    <button>Button</button>
  </div>
</body>
</html>

    カスケードスタイルシート


    1つの要素に複数のルールを適用できます.2つ以上存在する場合は、特定の選択者の最新ルールが優先されます.すなわち,最後に宣言したルールが優先的に適用される.
     ol {
    list-style: none;

} 


li {
      list-style: square;

}
    上記の場合、olのlist-styleはnoneであるが、liはセレクタにlist-style : square;ルールが適用されているため、squareが適用される.olとliの順序が異なる場合、olに適用されるnoneの値は適用されますか?
    このような質問をしたら、答えなくてもいいです.なぜなら、liはolの具体的な選択者であるからである.次に、「具体的」が何を意味するかを見てみましょう.
    カスケードの詳細については、スタイルの継承と適用の優先度を参照してください.

    優先度


    優先度は、より具体的なselectorに適用されるルールが、あまり具体的でないselectorよりも優先されることを意味する.
    liはolのサブアイテム選択者、すなわちliはolの親ルールを継承している.ol選択者包囲li,liはolのサブ選択者である.サブセレクタとして、liはolよりも具体的である.親セレクタ(=親セレクタol)で設定したルールよりも、子セレクタ(=子セレクタli)で設定したルールの方が具体的なので、上記の質問に対して「いいえ」と答えます.<a>アンカーマークはbodyから色属性を継承しますが、実際には適用されません.このアンカータグは、ブラウザが提供するデフォルトの色を適用するためです.したがって、リンクに適用されるこの色は、브라우저의 기본 색상が상속된 색상よりも구체적(specificity)に適している.さらに、より具体的には、属性選択者アンカーラベルに追加された色직접である.したがって、最も特定の要素に追加される色が最も優れています.
    参考資料:https://poiemaweb.com/css3-inheritance-cascading
    https://www.udemy.com/course/100-2022-web-development/
    [実験]csrf dvwa
    [白俊]5639:バイナリ検索ツリー