[cssベース]1)選択プログラム

アイデンティティ、カテゴリ、タグなどの選択項目は省略します.

マッチングセレクタ

EF
選択プログラムが貼り付けられている場合(選択プログラム+選択プログラム)
span.Orange=>spanタグは、Orangeというクラスの選択者を表します.

サブセレクタ

E > F
EのサブセレクタF

子孫選択者

E(空白)F
セレクタのシンボルとして、Eの子孫要素F-セパレータを選択します.
📗 ここで問答!!

次の2つのcssはどのようにスクリーンに表示されますか?

.fruit p {     // fruit 클래스 하위 모든 p태그에 적용
  color: red;
}

.fruit > p {  // fruit 클래스의 자식 p태그에 적용
  color: red;
}

隣接シェイプセレクタ

E + F
Eの次の兄弟要素Fのみ選択

一般的な兄弟選択者

E ~ F
Eの次のすべての兄弟要素Fを選択

バーチャルクラスセレクタ

E:hover

E:hover
マウスを置いたばかりの頃.

E:focus

E:focus
フォーカス中はインタラクティブなコンテンツのみで使用できます(tab-index要素input、imgなど)

E:active

E:active
マウスクリック時

E:first-child

E:first-child
Eが兄弟要素の最初の要素である場合は、

E:last-child

E:last-child
Eが兄弟エレメントの最後のエレメントである場合は、

E:nth-child(n)

E:nth-child(n)
n n n番目の要素を選択
E:nth-child(2)=>2番目の要素の選択
E:nth-child(2 n)=>偶数要素の選択
E:nth-child(2 n-1)=>奇数の2番目の要素を選択
E:nth-child(n+3)=>3個の後続要素(nは0から!
📗 ここで問答!!

この場合、りんごは赤いはずですが...色は適用されません.

仮想要素セレクタを再分析する場合、サブ要素の最初の要素に果物類がある場合は、サブ要素がdivであるため、pタグである必要があります.

この場合、fruitクラスサブのすべてのdivタグは、最初のサブ要素にのみ適用されます.

赤のみを1に適用する場合は、サブセレクタを使用します.
.fruit>div:first-schildを使用します.

E:nth-of-type(n)

E:nth-of-type(n)
Eのタイプ(ラベル名)と同じ兄弟要素を選択し、Eがn番目の要素である場合
(nキーワード使用時0から解釈)


分析を右から始めると分かりやすくなります.
1つ目はサブエレメントで、1つ目はpタグで、果物類の子孫エレメントでなければなりません.
fruitの最初のサブエレメントはdivなので、スタイルは適用されません.
2つ目はpマークで、果物類の子孫元素でなければなりません.

nh-of-type(1)はブドウを表し、類は.スタイルはredではないので適用されません.
nth-of-typeはタグ名で選択する概念であるため、クラスを混用すると問題が発生する可能性があります.
したがって、検索タグの概念としてのみ使用できます.

E:not(S)

E:not(S)
SではなくEを選択

継承

テキストのプロパティを処理する以外は、ほとんどのプロパティは継承されません.
ex)フォント関連プロパティ、text-align、text-instup、text-装飾、アルファベット間隔、不透明度.

強制継承

継承されないプロパティもinheritという値を使用して強制的に継承されます.

.parent {
   position: absolute;
}

.child {
   position: inherit;
}

仮想要素セレクタ

cssでhtmlに仮想要素を作成します.
仮想クラス👉🏻 :
仮想要素👉🏻::

E::before

E::before
E要素内部の前面にコンテンツを挿入する(content)
👀 contentという名前のプロパティが必要です.
contentは、テキストまたは画像であってもよい.

1,2,3テキストの前に要素が追加されました.

E::after

E::after
E要素内部の後ろに内容を挿入する(content)

属性セレクタ

htmlプロパティで選択します.
特定のクラスや名前を指定することなく、現在持っているhtmlプロパティを使用して選択できます.

[attr]

[attr]
属性attrを含む要素の選択
[attr=value]
属性attrを含み、属性値がvalueの要素を選択します.
[attr^=value]
属性attrを含み、属性値がvalueで始まる要素を選択します.
[attr$=value]
属性attrを含み、属性値がvalueで終わる要素を選択します.