Css3 の新しいセレクター: "[attribute^=value]"、"[attribute$=value]"、"[attribute*=value]"、":first-of-type"、" :root" 、「:empty」、「:target」など。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
1,[attribute^=value]属性値が指定された値で始まるすべての要素と一致します。
2,[attribute$=value]属性値が指定された値で終わるすべての要素と一致します。
3,[attribute*=value]属性値に指定された値が含まれるすべての要素と一致します。
| セレクター | Example | サンプルの説明 | CSS |
|---|---|---|---|
| :first-of-type | p:first-of-type | 各 p 要素を親として選択しますlevel | 3 |
| :last-of-type | p:last-of-type | ## の最初の p 要素親の最後の p 要素である各 p 要素を選択します。3 | |
| p:only-of- type | 各 p 要素がその親である唯一の p 要素を選択します | 3 | |
| p :only-child | 親の唯一の子要素である各 p 要素を選択します | 3 | |
| n) | p:nth-child(2)親の 2 番目の子要素である各 p 要素を選択します | 3 | |
| n) | p:nth-last-child(2)それぞれを選択 p 要素は最後の子から数えて、その親の 2 番目の子要素 | 3 | |
| n) | p:nth-of-type(2)親の 2 番目の p 要素である各 p 要素を選択します | 3 | |
| n) | p:nth-last-of-type(2)各 p 要素を選択すると 2 番目の p になります。最後の子から数えて親の要素 | 3 | |
| p:last-child | 親の最後の子である各 p 要素を選択します。 | 3 | |
| :root | ドキュメントのルート要素を選択します | 3 | |
| p:empty | 子を持たないすべての p 要素 (テキスト ノードを含む) を選択します | 3 | |
| #news:target | 現在アクティブな #news 要素 (アンカー名を含むクリックされた URL) を選択します。 | 3 | ##:enabled |
| 有効な各入力要素を選択します | ##3 | #:disabled | #input:disabled | #無効化された各入力要素を選択します
| #:checked | input:checked | 選択した各入力要素を選択します | 3 |
| :not( | selector | ):not(p) | #p 要素ではないすべての要素を選択します | ##3
| #: :selection::selection | ##ユーザーによって選択または強調表示された一致する要素の部分##3 | : 範囲外 | :out-of-range |
| ##3 | :in -range | :in-range | |
| 3 | :read- write | :read-write | |
| 3 | :read-only | :read-only | |
| 3 | :optional | :optional | |
| 3 | :required | :required | # # 「required」属性を持つ要素を照合するために使用されます。 set|
| :valid | :valid | は、次の目的で使用されます。入力値が正当な要素と一致する | |
| :invalid | :invalid | 不正な入力値を持つ要素と一致するために使用されます | |
| 3. レベルセレクター: | |||
| ユニバーサル セレクター (後続のすべての兄弟要素を検索) | 一致する F 要素と、一致する E 要素の後のすべての要素を選択します。一致する F 要素 |
以上がcss3 の新しいセレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
