CSS Spesifisiteit
Wat is spesifisiteit?
As daar twee of meer CSS-reëls is wat na dieselfde element verwys, sal die kieser met die hoogste spesifisiteitswaarde "wen", en sy stylverklaring sal op daardie HTML-element toegepas word.
Dink aan spesifisiteit as 'n telling/rang wat bepaal watter stylverklaring uiteindelik op 'n element toegepas word.
Kyk na die volgende voorbeelde:
Voorbeeld 1
In hierdie voorbeeld het ons die "p"-element as kieser gebruik, en 'n rooi kleur vir hierdie element gespesifiseer. Die teks sal rooi wees:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Kyk nou na voorbeeld 2:
Voorbeeld 2
In hierdie voorbeeld het ons 'n klaskieser (genoem "toets") bygevoeg en 'n groen kleur vir hierdie klas gespesifiseer. Die teks sal nou groen wees (alhoewel ons 'n rooi kleur vir die elementkieser "p" gespesifiseer het. Dit is omdat die klaskieser hoër prioriteit geniet:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Kyk nou na voorbeeld 3:
Voorbeeld 3
In hierdie voorbeeld het ons die ID-kieser bygevoeg (genaamd "demo"). Die teks sal nou blou wees, omdat die ID-kieser hoër prioriteit geniet:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Kyk nou na voorbeeld 4:
Voorbeeld 4
In hierdie voorbeeld het ons 'n inlynstyl vir die "p"-element bygevoeg. Die teks sal nou pienk wees, want die inlynstyl kry die hoogste prioriteit:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Spesifisiteitshiërargie
Elke CSS-keurder het sy plek in die spesifisiteitshiërargie.
Daar is vier kategorieë wat die spesifisiteitsvlak van 'n keurder definieer:
- Inlyn style - Voorbeeld: <h1 style="color: pink;">
- ID's - Voorbeeld: #navbar
- Klasse, pseudo-klasse, kenmerkkiesers - Voorbeeld: .test, :hover, [href]
- Elemente en pseudo-elemente - Voorbeeld: h1, :voor
Hoe om spesifisiteit te bereken?
Memoriseer hoe om spesifisiteit te bereken!
Begin by 0, voeg 100 by vir elke ID-waarde, voeg 10 by vir elke klaswaarde (of pseudo-klas- of kenmerkkieser), voeg 1 by vir elke elementkieser of pseudo-element.
Let wel: Inlynstyl kry 'n spesifisiteitswaarde van 1000, en word altyd die hoogste prioriteit gegee!
Nota 2: Daar is een uitsondering op hierdie reël: as jy die !important
reël gebruik, sal dit selfs inlynstyle ignoreer!
Die tabel hieronder toon 'n paar voorbeelde van hoe om spesifisiteitswaardes te bereken:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Die keurder met die hoogste spesifisiteitswaarde sal wen en in werking tree!
Oorweeg hierdie drie kodefragmente:
Voorbeeld
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Die spesifisiteit van A is 1 (een element selector)
Die spesifisiteit van B is 101 (een ID verwysing + een element selector)
Die spesifisiteit van C is 1000 (inline stilering)
Aangesien die derde reël (C) die hoogste spesifisiteitswaarde (1000) het, sal hierdie stylverklaring toegepas word.
Meer spesifisiteitsreëls voorbeelde
Gelyke spesifisiteit: die jongste reël wen - As dieselfde reël twee keer in die eksterne stylblad geskryf word, dan wen die jongste reël:
Voorbeeld
h1 {background-color: yellow;}
h1 {background-color: red;}
ID-kiesers het 'n hoër spesifisiteit as kenmerkkiesers - Kyk na die volgende drie kodelyne:
Voorbeeld
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
die eerste reël is meer spesifiek as die ander twee, en sal dus toegepas word.
Kontekstuele keurders is meer spesifiek as 'n enkele element keurder - Die ingebedde stylblad is nader aan die element wat gestileer moet word. Dus in die volgende situasie
Voorbeeld
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
laasgenoemde reël sal toegepas word.
'n Klaskieser klop enige aantal elementkiesers - 'n klaskieser soos .intro slae h1, p, div, ens:
Voorbeeld
.intro {background-color: yellow;}
h1 {background-color:
red;}
Die universele keurder (*) en oorgeërfde waardes het 'n spesifisiteit van 0 - Die universele keurder (*) en oorgeërfde waardes word geïgnoreer!