CSS erityisyys

Mikä on erityisyys?

Jos on olemassa kaksi tai useampi ristiriitainen CSS-sääntö, joka kohdistuu samaan elementtiin, selain seuraa joitakin periaatteita määrittääkseen, mikä on konkreettisin ja siksi voittaa.

Erittäin (specificity) voidaan ajatella pisteitä tai arvoja, jotka määrittävät, mitkä tyylitiedot sovelletaan elementtiin.

Yleinen valitsin (*) on matalampi erityisyys kuin ID-valitsin, mutta ID-valitsin on korkeampi erityisyys!

Huomioitavaa:Tämä erityisyys on yleinen syy siihen, miksi CSS-säännöt eivät sovellu tietyille elementeille, vaikka saattaisit ajatella, että niiden pitäisi.

Erityisyyden hierarkia

Jokaisella valitsijalla on paikkansa erityisyyden hierarkiassa. Seuraavat neljä luokkaa määrittelevät valitsijan erityisyyden tason:

Sisäänrakennetut tyylit - Sisäänrakennetut (inline) tyylit lisätään suoraan tyyliin asetettavaan elementtiin. Esimerkki:<h1 style="väri: #ffffff;">。

ID - ID on sivun elementin yksilöllinen tunniste, esimerkiksi #navbar.

Luokat, ominaisuudet ja pseudoluokat - Tämä luokka sisältää .luokat, [ominaisuudet] ja pseudoluokat, kuten :hover, :focus jne.

Elementit ja pseudoelementit - Tämä luokka sisältää elementinimet ja pseudoelementit, kuten h1, div, :before ja :after.

Miten erityisyys lasketaan?

Muista erityisyyden laskentamenetelmä!

Aloitetaan 0:sta, lisätään style-ominaisuuteen 1000, jokaiseen ID:ään 100, jokaiseen ominaisuuteen, luokkaan tai pseudoelementtiin 10 ja jokaiseen elementin nimeen tai pseudoelementtiin 1.

Mieti seuraavia kolmea koodikappaletta:

Esimerkki

A: h1
B: #content h1
C: <div id="content"><h1 style="väri: #ffffff">Otsikko</h1></div>
  • A:n erityisyys on 1 (yksi elementti)
  • B:n erityisyys on 101 (yksi ID-viittaus ja yksi elementti)
  • C:n erityisyys on 1000 (sisäänrakennettu tyyli)

Koska 1 < 101 < 1000, kolmas sääntö (C) on erityisempi, joten sitä sovelletaan.

Erityisyyslakki 1:

Erityisyyden ollessa samaa: uusin sääntö on tärkeä - Jos kirjoitat saman säännön kaksi kertaa ulkoiseen tyylitauluun, tyylitaulun jälkimmäinen sääntö on lähempänä tyyliin asetettavaa elementtiä, joten sitä sovelletaan:

Esimerkki

h1 {taustaväri: keltainen;}
h1 {background-color: red;}

Kokeile itse

Seuraava sääntö pätee aina.

Erityisyyslakki 2:

ID-valitsimet ovat ominaisuusvalitsijoita erityisempiä - Katso seuraavat kolme riviä:

Esimerkki

div#a {taustaväri: vihreä;}
#a {taustaväri: keltainen;}
div[id=a] {taustaväri: sininen;}

Kokeile itse

Ensimmäinen sääntö on tarkempi kuin muut kaksi, joten sitä sovelletaan.

Erityisyyslakki 3:

Ympäristövalitsimet ovat yksittäisiä elementtiä valitsijoita tarkempia - Sisäänrakennetut tyylit ovat lähempänä tyyliin asetettavaa elementtiä. Siksi seuraavissa tapauksissa:

Esimerkki

Tulee ulkoisesta CSS-tiedostosta:

#content h1 {taustaväri: punainen;}

HTML-tiedostossa:

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

Toimii seuraavan säännön mukaisesti.

Erittäisyysmääräykset 4:

Luokkavalitsimet voivat voittaa minkä määrän elementti-valitsimia tahansa - Luokkavalitsimet (kuten .intro, jotka voivat voittaa h1, p, div jne.)

Esimerkki

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

Kokeile itse

Lisäksi,Yleiset valitsimet ja perityt arvot omaavat 0 - * -erityisyys, body * ja vastaavat omaavat 0 -erityisyyden. Perityt arvot ovat myös 0.