CSS

CSS

Cascading Style Sheet
HTMLなどの寸法言語で作成されたドキュメントのWebサイトでの実際の表現を決定する言語です.
CSSのCは、親要素のスタイル属性を持つ積層の略です.
継承された様子がDOM樹構造の中の滝のように下がっているからです.

セレクタ

선택자 { 
(스타일 속성): (스타일 값); 
}

HTML要素にスタイルを付けたCSSコードの多くは、上記の構造から構成されています.
ご覧のように、リストスタイルの中かっこの前半が選択者です.
フルコレクタ

:HTMLドキュメントのすべての要素(すべて)を選択

* { color: red; }

タグコレクタ
ラベル名:指定したラベル署名を持つ要素を選択

p {color : red;}

idコレクタ
#idクエリー値:一致する要素を選択するためにidクエリー値を指定します

#p1 { color: red; }
<p id="p1"> paragraph 1</p> (html)

classコレクタ
.classツリー値:classツリー値を指定して一致する要素を選択

 .container { color: red; }
 .text-1 { color: red; }
  <div class="container"> (html)
  <p class="text-1 text-2 text-3">Center Large Blue</p> 
  (**html 요소에 class 어트리뷰트 값은 공백으로 구분하여 여러개 지정할 수 있음)

アトリビュートコレクタ(Attribute Collector)
コレクタクエリー:指定したクエリーを持つすべての要素を選択
コレクタ[クエリー=値]:指定したクエリーを選択し、指定した値がクエリーの値と一致するすべての要素を選択します.
コレクター[クエリー~=[値]:指定したクエリー値(スペースで区切られた)を含む単語を選択
コレクタ「クエリー」|=「値」:指定したクエリー値と一致するか、指定したクエリー値の後にハイフン(「値-」)で始まる要素を選択します.
コレクタ[クエリー^=[値]:指定したクエリー値で始まる要素を選択
コレクタ[クエリー$=[値]:指定したクエリー値で終了する要素を選択
コレクタ[クエリー*=[値]:指定したクエリー値を含む要素を選択
子孫セレクタ(子孫)
コレクタAコレクタB:コレクタAのすべての子孫(子)要素からコレクタBに一致する要素を選択

 div p { color: red; }

サブコレクタ
コレクタA／コレクタB:コレクタAのすべてのサブエレメントからコレクタBに一致するエレメントを選択

 div > p { color: red; }

隣接する兄弟セレクタ(prior sibling)
コレクタA+コレクタB:コレクタAの兄弟要素のうち、コレクタAのすぐ後ろにあるコレクタB要素を選択

 p + ul { color: red; }

通常の兄弟セレクタ(any older sibling)
コレクタAからコレクタBへ:コレクタAの兄弟要素で、コレクタAの後ろにあるすべてのコレクタB要素を選択します.

 p ~ ul { color: red; }