ホームページ  >  記事  >  ウェブフロントエンド  >  CSS で否定された疑似クラスとは何ですか?

CSS で否定された疑似クラスとは何ですか?

藏色散人
藏色散人オリジナル
2020-12-21 10:13:011567ブラウズ

CSS の負の疑似クラスは ":not(selector)" です。":not" の負の疑似クラスは、渡されたパラメーター セレクターによって選択されていない要素に直接一致します。渡されたパラメーターには、追加されたセレクターが含まれていない場合があります。または疑似要素。セレクター。

CSS で否定された疑似クラスとは何ですか?

推奨: 「css ビデオ チュートリアル

: not (selector) は CSS の否定的な疑似クラスです(セレクタ) をパラメータとして受け取ります。基本的に、他のセレクターを (パラメーターとして) 使用できます。

:not (selector) は、渡されたパラメーター セレクターによって選択されていない要素と一致します。渡されるパラメーターには、追加のセレクターや疑似要素セレクターを含めることはできません。

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

この例には、クラス「異なる」を持つ li 要素があります。

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>

CSS は、クラス「異なる」を除くすべての li 要素を選択します。

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

擬似クラス セレクターをすべての単純なセレクター (要素タイプ セレクター、ユニバーサル セレクター、属性セレクター、クラス セレクター、ID セレクター、擬似クラス セレクターを含む) に適用して、同じ効果を生成できます。

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}

しかし、疑似要素セレクターをパラメーターとして使用すると、期待した効果が得られません。

:not(::first-line) { 
/* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

CSS で否定された疑似クラスとは何ですか?

:not() の複数の使用法の視覚的表現

:not() 疑似クラスの優先順位は、そのパラメーターの優先順位です。 :not() 擬似クラスは、他の擬似クラス セレクターのようにセレクターの優先順位を上げません。

負の擬似クラス セレクターはネストをサポートしていないため、:not(:not(...)) は決して許可されません。開発者は、疑似要素は単純なセレクターではないため、:not() 疑似クラスの引数としては無効であることに注意する必要があります。さらに、一部の属性セレクターは広くサポートされていないため、属性セレクターを使用する場合は注意する必要があります。 :not() セレクターを別の :not() セレクターと連鎖させることも禁止されています。

以上がCSS で否定された疑似クラスとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。