ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS :selector_html/css_WEB-ITnose ではありません

CSS :selector_html/css_WEB-ITnose ではありません

WBOY
WBOYオリジナル
2016-06-24 11:18:171040ブラウズ

定義と使用法

:not(selector) セレクターは、各要素が指定された要素/セレクターであるかどうかを照合します。

ブラウザのサポート

すべての主要なブラウザは :not セレクターをサポートしています。

注: IE8 およびそれ以前の IE バージョンは、:not セレクターをサポートしていません。

e388a4556c0f65e1904146cc1a846bee 要素ではないすべての要素の背景色を設定する:

:not(p){background:#ff0000;}

オンラインで実行する

CSS セレクターのリファレンス:

「CSS」列 CSSバージョンで表すプロパティ定義 (CSS1、CSS2、または CSS3)。

セレクターの例 CSS の例 element 要素div p> 要素をすべて選択しますdiv>p[target][ターゲット=-blank][title~=flower][lang|=en]a:linka:visiteda:activea :hoverinput:focusp:最初に-文字1:first-childp:first-child e388a4556c0f65e1904146cc1a846bee 要素が親レベル スタイルの最初の子の場合にのみ指定します。 lang 属性の開始値 = "it" を持つすべての e388a4556c0f65e1904146cc1a846bee 要素を選択します 2element1~ element2p~ul p 要素の後のすべての ul 要素を選択します3[attribute^=value]a[src^="https"] src 属性値が始まるすべての要素を選択します"https" 3[attribute$=value]a[src$=".pdf"]値が ".pdf" で始まる各 src 属性を選択 終了要素 3[attribute*=value]a[src*="44lan"] src 属性値に部分文字列「44lan」が含まれる各要素を選択します 3:first-of-typep :first-of-typeその親である各 p 要素の最初の p 要素を選択します3:last-of-typep :last-of-typeは親の最後の p 要素です3:only-of-typep:only-of-type 各 p 要素を選択します その親の唯一の p 要素です3:only-childp:only-childその親の唯一の子要素である各 p 要素を選択します3: nth-child(n)p:nth-child(2) )親の 2 番目の子要素である各 p 要素を選択します3:nth-last-child(n) p:nth-last-child(2)各 p 要素を選択します最後の子から数えて親の 2 番目の子になります 3:nth-of-type(n) p:nth-of-type(2) あるすべての p 要素を選択します親の 2 番目の p 要素3:nth-last-of-type(n)p :nth-last-of-type(2) 2 番目の p である各 p 要素を選択します最後の子から数えて親の要素 3:last-childp :last-child 親の最後の子である各 p 要素を選択します。 in置く:enabled 有効な入力要素をすべて選択します3:disabledinput:disabled無効な入力要素をすべて選択します3:checked input:checked 選択した各入力を選択してくださいelements3:not(selector):not(p) p 要素ではないすべての要素を選択します3::selection::selection:out-of-range:in-range:read-write:read-only:Optional:required:valid :invalid
.class .intro class="intro" を持つ要素をすべて選択 1
#id #firstname id="firstname "要素 1
* * すべての要素を選択 2
element p すべての74596ac5811fbb968afab12aa64edbc3 要素と e388a4556c0f65e1904146cc1a846bee 要素をすべて選択します 1
1 element>element
親が
要素である f166a262bfc3fe295b10db004a17c7c8 要素の後の p> 要素
2 [attribute]
target 属性を持つすべての要素を選択 2 [attribute=value]
target="-blank" を使用してすべての要素を選択します 2 [attribute~=value]
「flower」という単語を含む title 属性を選択します"すべての要素 2 [attribute|= language]
すべての要素を選択 2 : link
Selectすべての未訪問のリンク 1 :visited
訪問済みのリンクをすべて選択 1 :active
アクティブなリンクを選択 1 :ホバー
マウスがリンク上にあるときに選択 1 :focus
フォーカスされた入力要素で選択 2 :first-letter
各 ae514ffa28cb10707c03c48e579a038c 要素の最初の行を選択します
2
:before p:before 各 e388a4556c0f65e1904146cc1a846bee 要素の前にコンテンツを挿入します 2
:after p:after 各;p> の後にコンテンツを挿入します。 element 2
:lang( language) p:lang(it)
3
:root :root ドキュメントのルート要素を選択します 3
:empty p:empty すべての p 要素を選択します (テキストを含む) ) を持っていない任意の子ノード) 3
:target #news:target 現在アクティブな #news 要素 (そのアンカー名を含むクリックされた URL) を選択します 3
:enabled
パーツを合わせるユーザーによって選択または強調表示されている要素の 3 :out-of-range
値が指定範囲外にある入力要素と一致します 3 :in-range
値が指定された範囲内にある入力要素と一致します 3 :read-write
はreadableと一致するために使用されます書き込み可能な要素 3 :read-only
「readonly」属性セットを持つ要素と一致するために使用されます 3 :optional
以前はオプションの入力要素を照合します 3 :required
「required」属性セットを持つ要素を照合するために使用されます 3 :valid
以下の要素を照合するために使用されます。入力値は正当です 3 :invalid
入力値が不正な要素と一致するために使用されます 3

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