FE.CSS-セレクタと擬似クラスの使用テクニック

参照テキスト
内容は『CSSセレクタワールド』から

cssセレクタ判別

( )子孫

セレクタの優先度は同じで、後に

となります.

document.querySelector('#myId').querySelectorAll(':scope div div')

>子

主な目的:衝突を避ける

シーン:ステータスクラス名制御、ラベル制限、階層位置と動的判断

+隣接

互換IE 8実装:first-child

~以降

は前に実装:視覚は前に、domは後

||列

跨列td選択

セレクタモード

amcss [am-button~="large"]{}

正則:冒頭[attr^="val"];終了[attr$="val"];[attr*="val"]を含む

大文字小文字を無視[attr~="val" i]

検索フィルタ

cssセレクタベストプラクティス

小文字、短命名、同一接頭辞組合せ'-'命名<5;

属性、意味(htmlタグ、属性、擬似クラス)向けの命名

アルパカ、id、ネスト、ラベル、*セレクタ

は不要

ステータスクラス名:.Active自体スタイルなし

スタイルタイプ:リセット、ベース、インタラクティブな変更

/*      */
:root{--base-color:#4c5161;}
/*      */
body,p,dd,dl,h1,...,ol,ul{margin:0}
/*      */
.cs-header{}
.cs-main{}
.cs-footer{}
/*      */
.cs-icon{}
.cs-button{}
.cs-dialog{}
/*      */
.cs-module-header{}
.cs-module-title{}
.cs-module-x{}
/*      */
.cs-some-...
/* css    */
.dn{display:none}
.db{display:block}
.dib{display:inline-block}
.fl{float:left}

擬似クラス

ユーザーの動作

:hoverは移動端に適用されない.遅延最適化の体験を増やす.

:activeは任意の要素をサポートします.データのエスカレーション;スタイルテクニック:box-shadow、linear-gradient、outline;

:focus非disabledフォーム要素、hrefの、、contenteditableの一般要素;マウスが動作するキーボードアクセス

:focus-within:要素または任意のサブ要素のフォーカスを担う場合;ドロップダウンリスト;

:focus-visible:キーボードアクセスのフォーカス:focus:not(:focus-visible){outline:0}

URL位置決め

:linkおよび:visited:および:hover,:active優先度:LVHA

:any-link::linkは、

にのみ無効です.

:targetアンカーポイント;シーンシーン:展開終了タブ

:target-within targetまたは子孫要素、現在は

をサポートしていません

入力

:enabledと:disabled chromeの下でenableの影響a、ieの下でfieldsetはサポートされておらず、contenteditable=“true”は

に一致しない

:read-onlyおよび:read-write:readonlyはフォームによってコミットされ、disabledはできません.

:placeholder-shownシーン:meterialスタイル;空の値の判断;

:default selected checked trueシーン:タグ支払い方法"推奨

:checkedはフォームのみで、[checked]は任意で、変化はリアルタイムではありません.もっと読む;タブ;単一チェックボックス、スイッチ;

:indeterminate checkbox.indeterminate=true ;ラジオのすべてのnameが選択されていない場合は一致し、nameが選択されていない場合は一致します.ヒント文案が選択されていません.

入力値検証

:validおよびinvalid(:user-invalid:blankはサポートされていません)

:in-rangeおよび:out-of-range

:requiredおよび:optional

:user-invalidおよび:blank

ツリー構造

:rootドキュメントルート要素、xhtml、svg.Shadow DOMはだめです.rootはcss変数を担当し、htmlはスタイル

を担当する.

:emptyには注釈before afterがあり、スペース改行はできません.シーンシーン:空の要素を非表示、フィールド欠落のヒント

サブインデックス

:first-child

:last-child

:only-childには兄弟要素がありません

:nth-child()はコンテンツのダイナミックにのみ適用され、odd,even,An+Bをサポートする.

:nth-last-child()ダイナミックリスト数マッチング(チャットグループのアイコン)li:only-child{} li:first-child:nth-last-child(2){}

照合タイプ

:first-of-typeおよびlast-of-type

:only-of-type

:nth-of-type()およびnth-last-of-type()

論理組合せ

:not()

:is()簡略化.is(.cs-a,.cs-b) >img

:where()は同じ役割を果たしますが、優先度は常に0

です.

その他

:host Shadow DOMルート要素

:host()Shadow DOMルート要素一致擬似クラス

:host-context()Shadow DOMルート要素コンテキストマッチング擬似クラス

:fullscreenフルスクリーン

:dir(ltr|rtl)方向

:lang()言語

:playing:pausedオーディオ要素