CSS :not() は要素を除外するための複数の引数をサポートしていますか?

:not() 擬似クラスの複数の引数に関する神話を暴く

CSS では、:not() 擬似クラスにより次のことが可能になります。特定の基準に基づく要素の除外。ただし、疑似クラス内で複数の引数を連結できるという誤解がよくあります。この誤解は、タイプを基準として使用して複数のタイプの入力要素を除外しようとするときに発生します。

次の例を考えてみましょう。

form input:not([type="radio"], [type="checkbox"]) {
  /* css here */
}

目的は、ラジオを除くすべてのタイプの入力要素を選択することです。そしてチェックボックス。ただし、この構文は機能しません。

解決策: 除外基準の詳細

この問題に対処するには、:not() 内で複数の引数を連鎖させるのではなく、 CSS は簡単な解決策を提供します。つまり、除外基準ごとに個別の :not() ステートメントを使用します。この場合:

input:not([type="radio"])):not([type="checkbox"])

この構文は、ラジオでもチェックボックスでもない入力要素を正しく選択します。 :not() 疑似クラスは排他的に動作するため、複数のステートメントを使用すると、要素が除外されるために指定された基準がすべて満たされることが保証されます。

覚えておいてください:

:not() 疑似クラスは、単一のステートメント内で連鎖する複数の引数をサポートしません。複数のタイプの要素を除外するには、除外基準ごとに個別の :not() ステートメントを使用します。除外基準を個々のステートメントに分割することで、CSS 内の目的の要素を効果的にターゲットにできます。

以上がCSS :not() は要素を除外するための複数の引数をサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。