CSS3セレクターに関する研究

属性セレクター

[title]: title 属性を持つ要素を選択します

[title='hello']: 属性がtitle、値がhelloである要素を選択します

[title~='hello']: 属性が title で、値の一部が hello である要素を選択します。スペースで区切られた別の値である必要があります

。

[title*='hello']: 選択された属性は title であり、hello の要素が含まれています

[title|='hello']: 選択された属性は title で、値は hello で始まり、その後に - が続く任意の文字が許可されます

[title^='hello']: 属性が hello で始まる任意のキャラクター

[title$='hello']: 属性が hello で終わる任意のキャラクター

[title^='hello'][title$='.py']: 属性が hello で始まり .py で終わる要素を選択します

コネクタ

h1~p: h1要素の後ろにある同じレベルのp要素をすべて選択します

p~p: 最初のp要素を除く、p要素以降の同じレベルのすべてのp要素を選択します

h1+p: h1要素の後の最初の兄弟p要素を選択します

疑似クラスセレクター

n番目のシリーズ、数字

nth-child(): 位置に応じてカウントします

nth-of-type(): 型に応じてカウントします

nth-last-child(): 位置に応じて最後から数えます

nth-last-of-type(): 型ごとに最後から数えます

(-n+number) を使用して、選択する最初のいくつかの要素を指定します

-nは0、-1、-2、-3…と負の数の方向に増えていきます

インターレースの色変更を実現するには、:nth-child(odd) または :nth-child(even) を使用します。

シングルセレクション

first-child: 位置によって最初の要素を選択します
first-of-type: タイプによって最初の要素を選択します

Last-child: 位置に基づいて最後の要素を選択します
Last-of-type: タイプに基づいて最後の要素を選択します

only-child: 他に兄弟要素がない場合に選択されます
only-of-type: 兄弟要素は存在できますが、異なる型である必要があります

only-of-type を使用すると、他のタイプの要素から要素を選択できますが、only-child では要素が単独で存在する必要があります。これは非常に役立つはずですが、まだ発見されていません。

疑似クラス

:ターゲット

1. :target を使用してクリック イベントをシミュレートします
3. ターゲットを使用してタブバーの切り替えを実現します
4. ターゲット疑似クラスを使用すると、ユーザーが読みたいコメントを簡単にハイライト表示できます

target が作成したタブ切り替えを使用します。もちろん、まだ多くの欠陥がありますが、それを使用して拡張できます。

:empty
子要素もテキストノードも持たない要素を選択します

:root
ルート要素を選択します。HTMLでは、ルートは常にhtml要素です

。

:not
パラメータは、要素または他の疑似クラスセレクターの受け渡しをサポートしますが、コネクタと疑似要素の受け渡しはサポートしません
指定されたパラメータを除く任意の要素を選択します

要素ステータス擬似クラス

:checked
チェックボックスが選択されている場合

:disabled
要素が無効な場合

:enabled
要素が無効になっていない場合

疑似要素

::first-line
テキストの最初の行を選択します

::first-letter
最初の文字を選択してください

::after
要素の最後に疑似要素を追加します

::before
要素の先頭に疑似要素を追加します

::selection
選択したテキストに適用

これらのセレクターを適切に使用すると、多くの問題を解決できます。まだ研究中であり、この記事の内容は長期的に更新される予定です。