ホームページ  >  記事  >  ウェブフロントエンド  >  CSSセレクターの紹介

CSSセレクターの紹介

王林
王林転載
2020-05-10 09:08:412174ブラウズ

CSSセレクターの紹介

#タグ セレクター

例:

`p`、`a`、`h[1,6]`、`span`、`div`、、、

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

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

例:

.id1{样式属性:值;}

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

例:


<div class="class1"></div>

注:

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

<div class="class1 class2.."></div>

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

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

ID セレクター

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

例:


<div id="id1"></div>

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

*{样式属性:值;}

疑似クラス セレクター

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

:link  /*未访问的链接*/:visited  /*已访问的链接*/:hover  /*鼠标移动到链接上*/     
最常用的链接伪类选择器:active  /*选定的链接 别松开的状态*/

構造(位置) 擬似クラスセレクター 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 サイトの他の関連記事を参照してください。

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。