ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 で一般的に使用されるいくつかのセレクター

CSS3 で一般的に使用されるいくつかのセレクター

php中世界最好的语言オリジナル: 2017-11-24 13:19:562219ブラウズ

1990 年代初頭に HTML が誕生した後、1996 年末に CSS が誕生しました。CSS は、Web ページの基本属性を定義するために特別に設計されています。では、CSS3 では、一般的に使用されるセレクターは何でしょうか?今日はそれを紹介しましょう。

HTMLの誕生 1990年代初頭

1996年末にCSSの最初のバージョンが誕生

1998年5月 CSS2が正式リリース

2004 CSS2.1がリリース

CSS3のリリース 2002 2003 2004 2005 2007 2009 2010

モジュール開発

CSS1 は、Web ページの基本プロパティを定義します:

フォント、色、

基本セレクターなど

CSS2 は、CSS1 に基づいて高度な機能を追加します

フローティングおよび位置決め、高度なセレクター、など (サブセレクター、隣接セレクター、

ユニバーサルセレクター)

CSS3 はモジュール開発に従います。リリース時間は時点ではなく、期間です。

ユニバーサルセレクター: * すべての要素を選択します

子要素を選択します: > 要素の直接の子孫を選択します

隣接する兄弟セレクター : + ターゲット要素の直後の最初の要素を選択します器通常の兄弟選択デバイス: ~ を選択しますすべての兄弟要素の後に: NTH-Child 指定されたインデックスのサブ要素を選択します

nth-child (n) 親要素の下の n 番目の要素

NTH- 子 (ODD) 奇数要素

NTH-子 (EVEN) 最適なサブタイプ

: NTH-Last-Child (N) Nita 要素

: NTH-OF-TYPE (N) 親要素 No. 1 指定された型の n 個の子要素

:nth-last- of-type 親要素の下から指定された型の n 番目の子要素

:first-child 親要素の下の最初の子要素を選択します

:last -child 親要素の下の最後の子要素を選択します

:only-child は、親要素の下にある唯一の子要素を選択します

:only-of-type は、親要素の下にある指定されたタイプの唯一の子要素を選択します

:root はドキュメントのルートディレクトリを選択します、return html

E[ attr] 属性名、特定の属性値が不明

E[attr="value"] 属性名を指定し、それに対応する属性値を指定します

E[attr ~="value"] 属性名を指定します。スペースで区切られた複数の属性値があり、値 value が含まれます

E[attr ^= "value"] 属性名を指定します、属性値は value で始まります

E[attr $="value"] 属性を指定しますname, 属性値は value で終わります

E[attr *="value"] は属性名を指定し、属性値には value が含まれます

E[attr |= "value"] は属性名を指定し、属性値は終わりますwith value-

UI 疑似クラスセレクター

で始まります:

:enabled 有効な状態要素を選択します

:disabled 無効な状態要素を選択します

:checked 選択された入力要素 (ラジオボタンまたはチェックボックス) を選択します

:default デフォルトの要素を選択します

:valid、invalid 入力検証に基づいて有効または無効な入力要素を選択します

:in-range、out-of-range 指定された範囲内または範囲外に制限された要素を選択します

: repuired、オプション Based on :required 属性による入力要素の選択を許可するかどうか

動的疑似クラスセレクター

:link リンク要素を選択

:visited ユーザーがアクセスできる要素を選択

:hover マウスがホバーしている要素

:active マウスのクリック時にトリガーされるイベント

:focus 現在フォーカスを受け取っている要素

その他の擬似クラスセレクター:

:not() 括弧内のセレクターの選択を無効にする

:lang( < ;ターゲット言語>) lang

グローバル属性に基づく要素

:target URLフラグメント識別子が指す要素

:empty 内容が空の要素を選択します

:selection マウスカーソルが要素の内容を選択します

CSS3の選択についてツールについては以上です。さらに興味深いコンテンツについては、PHP 中国語 Web サイトの他の関連記事にご注目ください。