Specificity ng CSS

Ano ang partikularidad?

Kung mayroong dalawa o higit pang salik na CSS na may kontrahensya sa parehong elemento, ang browser ay susunod sa ilang mga prinsipyo upang matukoy kung alin sa mga ito ang pinaka-partikular, at kaya ay nanalo.

Ipatungo ang partikularidad (specificity) bilang puntos/pangkat, kapag mapapagpasiyahan kung alin sa mga estilong deklarasyon ang magiging inilapat sa elemento.

Ang pangkalahatang selector (* ay may mas mababang partikularidad, habang ang selector ng ID ay may mas mataas na partikularidad!

Babala:Ang partikular na ito ay isang pangkaraniwang dahilan kung bakit ang mga tatak ng CSS ay hindi gumagamit sa ilang mga elemento, kahit na maaring isipin ninyo na dapat ito ay gumagamit.

Hierarkiya ng Specificity

Ang bawat selector ay may posisyon sa hierarkiya ng specificity. Ang apat na sumusunod na kategorya ng selector ay nagtataglay ng lebel ng specificity ng selector:

Inline style - Ang inline (inline) style ay direktang nakadikit sa elemento na kailangan ipa-set na style. Halimbawa: <h1 style="color: #ffffff;"></h1>.

ID - Ang ID ay isang tanging pagkakilala ng elemento ng pahina, tulad ng #navbar.

Class, attribute at pseudo-class - Ang kategorya na ito ay kasama ang .classes, [attributes] at pseudo-class, halimbawa: :hover, :focus at iba pa.

Elemento at pseudo-elemento - Ang kategorya na ito ay kasama ang pangalan ng elemento at pseudo-elemento, tulad ng h1, div, :before at :after.

Paano magtutuos ng specificity?

Palagian na ingatan ninyo ang paraan sa pagtutuos ng specificity!

Simula sa 0, magdagdag ng 1000 para sa style attribute, magdagdag ng 100 para sa bawat ID, magdagdag ng 10 para sa bawat attribute, class o pseudo-class, at magdagdag ng 1 para sa bawat elemento na pangalan o pseudo-elemento.

Isipin ang sumusunod na tatlong mga klase ng code:

Example

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • Ang specificity ng A ay 1 (isang elemento)
  • Ang specificity ng B ay 101 (isang ID na inilagay at isang elemento)
  • Ang specificity ng C ay 1000 (inline style)

Dahil 1 < 101 < 1000, ang ikatlong rule (C) ay may mas mataas na specificity, kaya ito ang magiging naaangkop.

Rule ng Specificity 1:

Sa kung walang pagkakaiba sa specificity: ang pinakabagong rule ay mahalaga - Kung isinasulat ang parehong rule dalawang beses sa labas na stylesheet, ang susunod na rule sa stylesheet ay mas malapit sa elemento na kailangan ipa-set na style, kaya ito ang magiging naaangkop:

Example

h1 {background-color: yellow;}
h1 {background-color: red;}

Try It Yourself

Ang susunod na rule ay palaging naaangkop.

Rule ng Specificity 2:

Ang ID selector ay may mas mataas na specificity kaysa sa attribute selector - Tingnan ang sumusunod na tatlong linya ng code:

Example

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Try It Yourself

Ang unang rule ay mas tiyak kaysa sa dalawang ibang rule, kaya ito ang magiging naaangkop.

Rule ng Specificity 3:

Ang kontekstong selector ay mas tiyak kaysa sa single element selector - Ang embedded stylesheet ay mas malapit sa elemento na kailangan ipa-set na style. Kaya, sa mga sumusunod na kaso:

Example

Mula sa labas na CSS na file:

#content h1 {background-color: red;}

In the HTML file:

<style>
#content h1 {
  background-color: yellow;
}
</style>

The following rule will apply.

Specificity Rule 4:

Class selectors will beat any number of element selectors - Class selector (such as .intro will beat h1, p, div, etc.):

Example

.intro {background-color: yellow;}
h1 {background-color: red;}

Try It Yourself

In addition to that,Universal selector and inherited values have 0 The specificity of - * is 0, body * and similar have 0 specificity. The specificity of inherited values is also 0.