開発者ツールを使用して表示

1.「要素」パネルの機能
開発者ツールを開いてWebページを表示すると、次の画面が表示されます.

[要素](Elements)パネルでは、ページのレイアウトを表示できます.どの要素がどのように作成され、どこにあるかを決定できます.
たとえば、クラス名containerのdivにはsectionがあり、最初のsectionにはh 1タグとクラス名rowのdivがあると判断できます.
また、左上隅のマウスカーソルが上昇する形状をクリックすると、マウスカーソルがある要素の幅、クラス名の高さなどの詳細を表示できます.マウスの左ボタンをクリックすると、その要素のcss情報を表示できます.
2.ページの節数

上のページには、5つの部分があります.
3、虫齢革ダニの横径は?
614 pxがベースです.しかし,これはネットワークの大きさに依存する反応型ネットワークである.
4.Styles部分の順序は何を意味しますか?


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

属性値の後ろにある!important

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

選択者#id

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

選択者はtag名、pseudo element(beforeなど)

の順にstyleを適用します.
優先度が同じ場合、cssの優先度が高くなります.
例<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要素スタイルの適用
5.開発者ツール-user agentスタイルシートとは?
user agentスタイルシートとは?

ブラウザのデフォルトスタイル値を表します.ブラウザによってデフォルトのスタイルが異なります.

ブラウザと同じCSSを適用するには、開発開始段階でデフォルトのスタイル値を初期化する必要があります.

上の画像のpラベルにはCSSは適用されませんので、user agentスタイルシートを使用してデフォルトスタイルのCSS値を検証できます.

pタグの表示プロパティをインラインに初期化すると、ユーザーエージェントスタイルテーブルでデフォルトで適用されるブロックではなく、インラインが適用されます.