:not() とは何ですか? :not() の簡単な使用法

この記事では次のことを紹介します: not() とは何ですか? :not() を簡単に使用することで、誰もが :not() の使用方法を理解できます。困っている友人は参考にしていただければ幸いです。

:not() は CSS の否定的な疑似クラス セレクターです。これは、単純なセレクター (以下に示す) を引数として受け取り、引数で表されていない 1 つ以上の要素と一致する機能的な疑似セレクターです。

:not() パラメーターとして使用できるものは、次の単純なセレクターのいずれかです:

1. タグ セレクター (p、span など)

2、クラス選択 (.element、.sidebar など)

3、ID セレクター (#header など)

4、疑似クラス セレクター (次のような: first) -child, :last-of-type)

5. 属性セレクター ([type="checkbox"] など)

6。ただし、次のように渡します。 not() のパラメータは、疑似要素セレクター (::before、::after など) または別の負の疑似クラス セレクターにすることはできません。

したがって、次は無効な :not() 値です:

/* 无效 */
p:not(:not(.same)) {}

p:not(:not(:last-child)) {}

:not(::first-letter) {}

a:not(::after) {}

上の例からわかるように、:not() はネストできません。たとえば、not(:not() ..))。 :matches() 擬似クラス内でネストすることはできません (例: selector(:matches(:not(..)))。

前に述べたように、:not() セレクターは、引数内のセレクターによって表されない要素と一致します。したがって、次の CSS ステートメント: :

li:not(.new) {    
  /* 所有样式列表项，除了具有新类的项之外*/
}

は、.new クラス名を持つリスト項目を除くすべてのリスト項目を選択します。

:not() 選択は、さらに多くの :not() 選択に連鎖させることができます。たとえば、次のコードは、ID を除く記事のすべての #featured と一致し、クラス名を持つ記事を除外します。チュートリアル:

article:not(#featured):not(.tutorial) {    
     /* 格式化文章 */
}

:not() は、他の疑似クラスや疑似クラスとリンクすることもできます。 -要素 。たとえば、次の例では、::after 疑似要素を使用して単語 "new!" を .old に追加し、クラス名のない項目をリストします。

li ：not（.old）:: after {     
   content：“New！” ;    
   color：deepPink;
}

説明:

:not( ) 疑似クラスの選択が許可されています。 無駄な選択を書き込みます。例: not(*) は、どの要素にもスタイルが適用されないという意味ではまったくありません。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

以上が:not() とは何ですか? :not() の簡単な使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。