Kuinka käyttää CSS-spesifisyyttä

Jos aiot käyttää CSS säännöllisesti, sinun on kehitettävä käsitys siitä, mikä erityisyys on ja miten sitä sovelletaan.

Muut kuin kellukkeet ja asennot, spesifisyys voi olla yksi vaikeimmista asioista, tottumatta, puhumattakaan isännältä. CSS: ssä käytettävät valitsimet ovat eri painoja ja niitä hallitsee spesifisyys. Siksi joskus, kun käytät sääntöä elementtiin, se ei näy suunnittelussa.

Jos olet aina luottanut pelästyneeseen tärkeään avainsanaan hakata CSS: täsi, niin tämä artikkeli on sinulle.

Miten selain lukee CSS: n

Jotta voit saada perustuksesi vakaiksi, sinun on tiedettävä, miten selain todella lukee CSS: n ja miten sääntöjä ohitetaan.

Ensinnäkin selain lukee tyylitaulukon ylhäältä alas, mikä tarkoittaa, että tällä koodilla:

/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}

Rivi 10: ssä määritetty sääntö ohitetaan ja ankkurointitunniste on sininen, koska selaimessa käsitellään sääntöjä, jotka ovat alhaisemmat CSS-järjestelmään.

Tämä toimii myös todellisessa tilauksessa, johon tuodat css-tiedostoja, esimerkiksi:

Koska olet asettanut custom.css -tyylin tyylin.css jälkeen tyyli.css (nykyään alennuksen valitsimien paino) ohitetaan ja korvataan, mikä on custom.css: ssä, tätä tekniikkaa käytetään usein teemojen tekijöiden avulla antaa käyttäjälle tilaa lisätä omia tyylejä muuttamatta päätiedostoa. (Huomaa kuitenkin, että custom.css ei korvaa tyyliä.css kokonaan, vain ne säännöt, jotka on nimenomaan ohitettu, korvataan.)

spesifisyys

Kaikki edellä on vain, jos käytät samaa painoa jokaisella valitsimella. Jos määrität tunnuksia, luokkia tai pinoamiselementtejä, annat heille painoa, ja se on spesifisyyttä.

Neljä luokkaa, jotka määrittävät valitsimen spesifisyyden tason: inline-tyylejä (näitä käytetään joskus javascriptin avulla), ID: t, luokkiin ja elementteihin. Kuinka mitata erityisyys? Spesifisyys mitataan pisteissä, joiden suurin pistearvo on käytössä.

ID: n arvo on 100 pistettä.
Luokat arvostavat 10 pistettä.
Elementit ovat yhden pisteen arvoisia.

Tiedän tämän, jos käytät niin valitsinta:

#content .sidebar .module li a

Sen kokonaispaino on 122 pistettä (100 + 10 + 10 + 1 +1), joka on tunnus, kaksi luokkaa ja kaksi elementtiä.

Muistettavaa

ID: llä on aivan liian paljon painoa luokkiin ja elementteihin verrattuna, joten sinun tulisi rajoittaa ID: n käyttämistä tyylitiheyksiisi minimiin.
Tapauksissa, joissa valitsimilla on sama paino, järjestys, jonka ne näyttävät, palautetaan, ja jälkimmäinen on korkeampi prioriteetti.
Tyylit sisällytetään HTML-tunnistustyyliihisi tyylitiheyteen, koska ne ovat lähempänä elementtiä.
Ainoa tapa ohittaa inline-tyylit on käyttää! Tärkeää lausumaa.
Pseudo-luokilla ja ominaisuuksilla on sama paino kuin normaaleilla luokilla.
Pseudoelementeillä on myös sama paino kuin normaalilla elementillä.
Yleisvalitsimella (*) ei ole painoa.

esimerkit

ul li a {color: red;}

Valitsimen paino on 3, mikä tarkoittaa, että vain lisäämällä luokka muualle, voit ohittaa sen.

.content #sidebar {width: 30%;}

Tämä valitsin painaa 110 pistettä lähinnä ID: n ansiosta, joka lisää 100 pistettä 110: sta.

.post p:first-letter {font-size: 16px;}

Tämän valitsimen paino on 12 pistettä, koska pseudo-elementti: ensimmäinen kirjain painaa vain 1 piste ja niin myös p-tunniste.

p {font-family: Helvetica, arial, sans-serif;}

Tämä valitsin painaa vain 1 pisteen, tämän tyyppistä valitsinta on käytettävä sivun yläosassa, kun merkitset perustyylit, joita myöhemmin voidaan ohittaa tietyillä alueilla.

Muista aina, että ID-valitsimen ohittamiseksi sinun on kirjoitettava 256 samaa elementtiä, kuten:

#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}

Ainoastaan tällä tavalla toinen valitsin voittaa tunnuksen avulla.

johtopäätös

Spesifisyys ei ole CSS: n ilmeinen osa, mutta mielestäni se on kaikkein eniten huomaamaton alue. Erityisominaisuuksien saaminen auttaa välttämään vikoja, mutta nopeuttaa sekä kehitystäsi että lopullista sivustoasi.

Ylittääkö tunnuksia kirjoitettaessa CSS? Oletko koskaan palannut! Tärkeää? Kerro meille kommentit.

Esitetty kuva / pikkukuva, tarkkuuskuva kautta Shutterstock.

!tärkeä css parhaita käytäntöjä css-spesifisyys ylivoimaiset css-säännöt tyylitaulukkoja