ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。