CSSセレクタ:*, root , html , bodyセレクタ

7154 ワード
webdev css beginners frontend テキストリンク
このノートは、それらの違いを説明することを目的とし、うまくいけば、最後にどのように、それらを使用するときにあなたを啓発します.

必要条件
私はあなたが既に基礎知識を持っていると仮定するつもりです
  • HTML要素と
  • CSSセレクタ.
    • と確認して、

    基本的にはCSSセレクタです.CSSセレクタは、HTMLドキュメントの要素を選択するために使用されます.
    上記のものに飛び込みましょう.

    ユニバーサルセレクタ
    まず、ユニバーサルセレクタ*から始めましょう.名前が意味するように、それはあなたのHTMLページのすべての要素を選択するユニバーサルセレクタです.ユニバーサルセレクターに与えるスタイリングは、ページ上のすべての要素に適用されます.例えば、
    *{
border: 1px solid red;
}
    ここで、あなたのウェブページのすべての要素は、赤い境界線を持ちます.これはCSSをデバッグするときに便利になります.
    また、あなたの要素にいくつかのCSSのリセットを与えるためにそれを使用することができます.例えば、
    *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
    ここでは、すべての要素は、ボックスボックスのサイズを設定すると、すべての側面に0マージンとパドルがボーダーボックスに設定されます.
    *を使用して与えられたスタイルは、個々の要素セレクタで与えられたスタイルによって上書きでき、要素に永続的なスタイルを与えるためには使用しないでください.
    *{
color: red;
margin 5px;
border: 1px solid black;
}

p{
color: green;
}

    <body>
   <div>
      <span>I'm a red span.</span>
      <p>I'm a green paragraph.</p>
      <p>I'm a green paragraph.</p>
      <p>I'm a green paragraph.</p>
      <span>I'm a red span.</span>
   </div>
</body>
    あなたは、我々のP要素が赤の代わりに緑の色を持っているのを見ます、しかし、我々のケースの他の要素は赤の一般的な色を受けます.
    CSSセレクタの後に*を配置することで、特定の要素またはCSSセレクタのすべての子孫を選択することもできます.
     *{
color: red;
margin: 5px;
border: 1px solid black;
}

p{
color: green;
}

.sample-element *{
color: blue;
}

    <body>
   <div>
      <span>I'm a red span.</span>
      <p>I'm a green paragraph.</p>
      <p>I'm a green paragraph.</p>
      <p>I'm a green paragraph.</p>
      <span>I'm a red span.</span>
   </div>
   <div class="sample-element">
      <p>I'm a blue paragraph.</p>
      <p>I'm a blue paragraph.</p>
      <span>I'm a blue span.</span>
   </div>
</body>

    ルートセレクタ
    : rootは擬似クラスセレクタです.それはあなたの文書のルート要素、すなわち、あなたの文書の最も高い親密な要素を選びます.
    HTML要素セレクタとルートセレクタは、どちらもルートの親要素を表しますが、そうではありません.
    ルートセレクタはドキュメントのルート要素を対象としています.これは、ドキュメントが必ずしもあなたのHTMLドキュメントである必要はありません.また、XMLドキュメント、XHTMLドキュメント、またはCSSスタイルを適用する他のドキュメントでもあります.したがって、これらのファイルの親要素は、ルートセレクタを使用するときに対象となるものです.HTML要素、XML要素、およびXHTML要素です.
    これは、たとえば、ルートセレクタとHTML要素セレクターを使用すると、スタイルを適用するときに、次の例に示すように、ルートセレクタのスタイルがHTML要素セレクターのスタイルよりも高い特異性を持つことを意味します.
    :root{
background-color : red;
}

html{
background-color: green;
}
    あなたは、背景色は緑色の代わりに赤であることがわかります.
    rootセレクタはグローバル変数を宣言するためにも使用されます.CSSでは再利用可能なスタイルです.たとえば、特定のHexコードの特定の要素の色として使用したい場合は、16進数の色を暗記し、CSSセレクタに1つずつ入力するのではなく、ルートを定義し、CSSセレクタで呼び出すことができます.それから、あなたが再び色が好きでないと決めるとき、あなたはそれをあなたがそれを使ったすべてのCSSセレクタを通して手動で行く代わりに、ルートでそれを変えることができます.これは、繰り返しスタイルを管理することが容易になります.(前のノートでもっと読みます)
    :root{
primary-color: #ff0000;
secondary-color: #00ff00;
}

h2{
color: var(--primary-color);
}

p{
color: var(--secondary-color);
}
    あなたのページのすべてのH 2要素とP要素は、それぞれ、あなたのために、Hand 0000とCount 20 00 FF 00のHex色を受け取ります.

    HTML要素セレクタ
    それではHTML要素セレクタについて話しましょう.
    HTML要素セレクターはHTMLドキュメントのルート要素を参照します.head要素とbody要素の2つの子要素が含まれます.
    HTML要素セレクターで宣言されたスタイルは、カラーファイルやフォントスタイルなどのHTMLファイル内のすべての要素に継承されます.一方、背景色のように継承されません.
    ここでは、他の要素がすべての要素のデフォルトである透明の背景色を持つ間、HTML要素だけが背景色を持ちます.それから、すべての要素がHTML要素と同じ背景色を持っているという幻想をあなたに与えます.
    HTML要素にスタイルを適用することは推奨されません.なぜなら、それらはボディ要素スタイルとドキュメント内の他の要素によって上書きされるからです.
    唯一の例外は、すべての子孫要素、特にフォントサイズで継承されるフォントスタイルを宣言したい場合です.これは、ルート要素としてHTML要素セレクタがあるため、要素(ルート要素)の任意のフォントサイズに基づいて任意の要素のREM(ルートEM単位)サイジングを持っています.
    例えば、
    html {
    font-size: 16px;
}
.rem-block {
    font-size: 1.2rem; 
}
    .remブロックは19 pxフォントサイズになります.
    すべての時間ではない場合、ほとんどの場合、body要素はHTMLドキュメント内のすべてのスペースを占有します.したがって、body要素が最終的にブラウザでそれをカバーするときにHTML要素をスタイリングする点がないでしょう.

    body要素セレクタ
    一方、body要素セレクタには、Webブラウザで見たり、表示するすべての要素が含まれます.
    HTML要素セレクターとボディ要素セレクターの間には、ボディ要素セレクタがHTML要素セレクタよりも高い特異性を持っているという事実以外にはあまり違いがありません.
    したがって、body要素内のスタイルは、HTML要素内の任意の複製スタイルをオーバーライドします.また、そのスタイルは、その中の要素スタイルによって上書きできます.
    前に述べたように、body要素がHTML要素全体をカバーするので、HTML要素よりも本体要素にスタイルを与える方が良いです.また、実際にはブラウザで見る他のすべての要素を実際に含んでいます.HTML要素はルート要素とドキュメントの型を指定します.

    要約しましょう.

    セレクタ
  • それはHTML文書内のすべての要素を選択するユニバーサルセレクタです.
  • それはすべての要素に普遍的なスタイルを与えるために使用することができます.
  • は、特定の要素内のすべての子孫要素を選択するために使用することもできます.
  • それはCSSのリセットを作成するために使用することができます.
  • それは他の要素スタイルで上書きできます.

    • ルートセレクタ
  • それは擬似クラスセレクタです.
  • それはあなたのドキュメントのルート親要素を表します.
  • それは、あなたがCSSでスタイリングしている文書に応じて、HTML、XML、SVGタグなどでありえます.
  • は、HTML要素セレクタより高い特異性を持ちます.
  • CSSでグローバル変数を宣言するために使用されます.

    • HTML要素セレクタ
  • HTMLドキュメントのルート要素です.
  • それは頭と体の要素である2つの子要素を含んでいます.
  • その中で宣言されたスタイルは、その子孫が継承し、それらによって上書きされる.
  • フォントスタイルのようなHTML要素に必要なスタイルだけを適用する必要があります.

    • body要素セレクタ
  • それはブラウザで見られるHTML文書全体を網羅する.
  • ウェブブラウザに表示される他のすべての要素を保持します.
  • それは、HTMLよりも体のスタイルを宣言する方が良いです.
    • あなたは、この記事の最後までそれを作りました.ありがとう.今では、セレクタ、ルートセレクタ、HTML要素セレクタ、body要素セレクタの違いと、それらをどのように使うかを理解しています.あなたがLemmeをコメントセクションで知っていて、下であなたの反応を残してくださいならば、してください.😁
    次の時間まで.バイ!

    接続してください

  • -

  • LinkedIn .
    • あなたが私のメモが好きで、私を支持したいならば、あなたは私にコーヒーを買うことができます.私はコーヒーの味が好きです.🥰
    Android開発:なぜMyApplication類ノートを作成したのか
    mysqlソートクエリーフィールド