エレメントスタイルの適用順序の意味

2325 ワード

Styles部分の順序は何を意味しますか?


上のスタイルのソートを見てください.
.rowのstyleから既存のhtmlを内蔵したstyleまで、上から下へスタイルの適用が表示されます.
注意::selection:ホームページのドラッグ部分の背景色を変更する場合に使用します.
つまり.
具体的なスタイル👉 ますます抽象的なスタイル
使用して、スタイルの適用順序に優先度が適用されているかどうかを決定できます.
CSSのCはCascadingの略で、「上から下へのスタイルシート」という意味です.
つまり、HTMLの要素がどのCSSスタイルの影響を受けるかを決定するために、スタイルを優先します.
CSSスタイル優先順位
優先度がより簡単に表示される場合は、通常

  • 属性値の後ろにある!important

  • スタイル属性をタグにインラインする

  • 選択者#id

  • 選択者class,pseudoクラス(:hoverとか)

  • 選択者はtag名、pseudo element(beforeなど)
  • の順にstyleを適用します.
    優先度が同じ場合、cssの優先度が高くなります.
    ex)
    <div id="i" class="a b c"style="background: yellow;">zero</div>
    css
    #i {
      display: block;
      display: inline-block;
      background: skyblue;
    }
    
    .a.b {
      background: red;
      color: blue;
    }
    
    .c {
      background: white;
      color: red;
      font-style: normal;
    }
    
    div {
      background: darkred;
      color: white;
      text-decoration: line-through;
    }
    インラインスタイルの値を適用した後👉 id値iのstyleを適用します.👉 a.b styleの適用👉 class c styleの適用👉 div要素スタイルの適用