CSS におけるセレクターの優先順位の詳細な紹介

特殊性とは何ですか

CSS スタイルを HTML 要素に適用する場合、多くの場合、要素を見つける方法は次のとおりです:

<p id="container" class="wrap_sty">   
    <p class="pra">这是一个段落</p>   
</p>   
<style>   
    #container p { color:red }   
    p p { color:green }   
    p { color:yellow }    
</style>

HTML 要素、それをはるかに超えたものです。では、同じスタイルが多数要素に適用された場合、最終的にはどのスタイルが表示されるのでしょうか? CSS は、特異性と呼ばれる方法を使用して、複数のセレクターに優先順位を付けます。

CSS の特異度
セレクターの特異度は、左から右に a b c d の 4 つのレベルに分かれており、セレクター ルールに同じ種類のセレクターが複数ある場合は、左にあるものが優先されます (+1)。
HTML内部スタイルの場合、具体性が優先され、a=1
IDセレクターの具体性はb、
クラスセレクター、擬似クラスセレクター、属性セレクターの具体性はc
ラベルセレクター、疑似要素セレクター d
については、まずいくつかのセレクターの種類について説明します。

4. 属性セレクター

#myid { ... }

W3CSCHOOL などのほとんどのドキュメントでは詳細に説明されていないため、多くの人は属性セレクターがこの p[title="mytitle"] または #id[title=" のようなものであると考えるかもしれません。 mytitle" "] 待ってください、これは属性セレクターです。厳密に言えば、これは純粋な属性セレクターではなく、ID セレクター、ラベル セレクターなどと属性選択で構成されています。

5. 疑似クラスセレクター

.myclass { ... }

一般的な疑似クラスセレクターは次のとおりです:

Link 疑似クラス、:link、:visited、アンカー要素に使用されます。

任意の選択に対する動的疑似クラス、:hover、:focus、:active。

6. 疑似要素セレクター

p { ... }

疑似要素と疑似クラスは、実際に仮想 HTML 要素を生成できるため、疑似要素と呼ばれますが、疑似要素は DOM を取得できません。
疑似要素のアプリケーションは数多くありますが、最も一般的なものは次のとおりです::float をクリアした後:

[title="mytitle"] { ... }

CSS の具体性の例

CSS セレクターの具体性の例をいくつか示します:

Selector

Speciality

10進法に基づく特殊性

style="color: red"

1, 0, 0, 010001000, 2, 0, 0200 .sty {}

	#id {}	0, 1, 0, 0
#id #aidstyle="color: red"	1, 0, 0, 0	1000
#id {}	0, 1, 0, 0	100
#id #aid	0, 2, 0, 0	200
.sty {}	0, 0, 1, 0	10
.sty p[title=""] {}	0, 0, 2, 0	20
p:hover {}	0, 0, 1, 0	10
p {}	0, 0, 0, 1	1
ul::after {}	0, 0, 0, 1	1
p p {}

0, 0, 1, 0

10

.sty p[title=""] {}

0 , 0, 2, 0

20

p:hover {}

0, 0, 1, 0

10

p {}

0, 0, 0, 1

🎜1🎜🎜🎜🎜ul::after {}🎜🎜0, 0, 0, 1🎜🎜1🎜🎜🎜🎜p p {}🎜🎜0, 0, 0, 2🎜🎜2🎜🎜🎜🎜🎜🎜 2 つのルールの詳細度が同じ場合、後で定義されたルールが最初に定義されたルールをオーバーライドします。 🎜🎜🎜CSS の重要性🎜🎜 CSS には、特異性を無視できるもう 1 つのことがあります。それは、!重要です。このタグを使用する CSS プロパティが常に優先されます。 🎜

p:hover { ... }

🎜🎜🎜 ID セレクターがクラス セレクターよりも具体的である場合でも、2 番目のスタイルは最初のスタイルより優先されます。 🎜両方のプロパティに ! important がある場合、その特異性によって優先度が決まります。 🎜

p::after { ... }   
p::before { ... }

🎜🎜🎜その結果、最初のスタイルが 2 番目のスタイルよりも優先されます。 🎜IE6 は ! important を完全にはサポートしていません。IE6 では、! important 属性がセレクターで最初に定義され、その後 ! important のない同じ属性が定義された場合、 ! important は無効になります。 🎜

<ul>   
    <li>A</li>   
    <li>B</li>   
</ul>   
<style>   
    li { float:left }   
    ul::after { content: ""; display: block; clear: both }   
</style>

🎜🎜🎜 IE6 ではポルノになるわけがないので、血を見ましょう! 🎜IE6/7でも、味を損なうことなく!重要の後にいくつかの要素を追加することもできますが、あまり退屈しないことをお勧めします! 🎜🎜りー🎜🎜

以上がCSS におけるセレクターの優先順位の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。