CSSセレクターの紹介

#タグ セレクター

例:

クラス セレクター(クラス)

クラスセレクターは「.」で定義されます。

例:

互換性の問題が発生する可能性があるため、名前付けにはアンダースコアを使用しないでください。アンダースコアは一般に JS で使用され、純粋な数字や中国語の名前は使用しません。

例:

注:

クラス セレクターには、マルチクラス名セレクターも含まれています

(ビデオ チュートリアルの推奨事項:

css ビデオ チュートリアル)

ID セレクター

ID セレクターは「#」で定義されます。例: #id1{Style 属性: value;} クラスセレクターなどのネーミングメソッド

例:

ワイルドカードセレクター

疑似クラス セレクター

リンク疑似クラス セレクター (主に、存在しなくてもよいが順序を逆にできないタグ用)

構造(位置) 擬似クラスセレクター CSS3

:first-child 親要素の最初の子要素に属する指定されたセレクターを選択します

:last-child 最後の子要素を選択します指定されたセレクター

:nth-child(N) は、要素のタイプに関係なく、最後の子要素から数えて、親要素の N 番目の子要素であるすべての要素に一致します。 N は数値、キーワード、または数式です。

#キーワード: odd は奇数、even は偶数

式: 2n 偶数 2n 1 奇数 n は倍数

:nth-last-child() は最後の子要素から始まる番号です。デフォルトは最初の要素です。

##ターゲット疑似クラスセレクター

##:target target 擬似クラス セレクター セレクターは、現在アクティブなターゲット要素を選択するために使用できます。

子要素セレクター

子要素セレクターは、要素のみを選択できます。要素の子要素です。書き方:

親が最初、サブセットが後、真ん中は >

注:> で接続されます。両側にはスペースが必要です。子孫セット、息子セットのみ > を使用せず、すべての子孫を選択できます

属性セレクター

特定の特別なセレクター属性はタグを選択できます。 属性セレクターを使用します。書き込み: a[title] {} 属性セレクターは、角括弧 div[class^=font] { } div[class$=font] { } で始まります。 font 末尾の div[class*=tao] { } は、tao が任意の位置にあることを意味します。

疑似要素セレクター (CSS3)

.dome クラス セレクター: 最初の子の疑似クラス セレクター::最初の文字 疑似要素セレクターE::first-letter テキストの最初の単語または文字

E::first-line テキストの最初の行

E::selection選択したテキスト スタイル (マウス)

E::before{ content: "Text" } 前のボックス内 (フォントを追加)

E::after{ content: "Text" } 内側後ろのボックス (フォントの追加)

推奨チュートリアル:

css クイック スタート

以上がCSSセレクターの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。