Selectorのタイプとの比較

CSSを使用してhtml内のテキストを複数表示するには、特定の領域のセレクタを選択する必要があります.主に3つの選択肢があります.最も狭く、最も具体的なid、中程度の味のclass、および最も広い範囲を選択するために、tag自体を選択者として使用することができる.

    <div id="selectById">
        여기는 id로 선택된 영역!
    </div>
    <div class="selectByClass">
        여기는 class로 선택된 영역!
    </div>
    <div>
        여긴 클래스나 아이디 따위 없다! 
    </div>

1. id

idは、最も狭い範囲の単一オブジェクトのセレクタです.一度しか発表できないから!htmlドキュメントには、同じidしかありません.だから彼は選択性が最も高い選択者だ.
CSSページから#idでロードできます.上のページでは、「ここはidが選んだエリアです!」CSS属性を追加するには、#id{}に必要なcssを追加します.
以下の表現で字に赤を塗ることもできます.

#selectById {
    color: red;
}

2. class

classとは、idより広い範囲の対象の選択者を指す.同じクラスを複数回宣言したり、htmlで同じクラス名で複数の要素をバンドルしたりできます.だから彼は実際に汎用性が最も高い選択者だ.
cssページにあります.classでロードできます.上のhtmlでは、「ここはclassとして選択したエリアです!」にcssスタイルを追加するには、cssドキュメントで次のような表現で青を追加します.

.selectByClass {
    color: blue;
}

3. Tag

では、classとidが指定されていない要素に対して、cssをどのように設定しますか?
ラベル自体を読み込むだけでいい下のように!

div {
    color: grey;
}

524579142度もshop .度もいらないのが一番簡単な方法です!
しかし、実際のhtmlドキュメントでは、確かに同じタグが多く使われているので、注意が必要です.
上記cssスタイルのhtmlを開く

面白くない文字の羅列が見えるかもしれません.
また、コレクタは繰り返し使用できます.

<div class="selectByClass" id="selectById">
태그와 클래스와 아이디로 중복해서 선택된 영역!
</div>
<div class="selectByClss">
태그와 클래스로 중복해서 선택된 영역!
</div>

このような友達を実行するとどうなりますか?

こんなつまらないテキストも
これは、id>>>>>clas>>>>tagの優先度に応じて、セレクタにも優先度があることを意味する.