Laske CSS-spesifisyys ja selvitä, mikä sääntö voittaa
Liitä valitsimia laskeaksesi niiden spesifisyyden tai liitä CSS ja elementti nähdäksesi, mikä sääntö pätee.
- Toimii laitteellasi
- Ei rekisteröitymistä
- Toimii offlinessa vierailun jälkeen
Selaimen oletustyylit ja muut tyylitiedostot eivät ole mukana. Mitään ei lähetetä minnekään.
| Valitsin | Spesifisyys | Paino | Konteksti |
|---|
| Sääntö | Arvo | Spesifisyys | Kerros | Tulos |
|---|
Miten selvitä, mikä CSS-sääntö voittaa
- Valitse tila: laske valitsimia tai etsi voittava sääntö.
- Liitä valitsimet tai CSS, HTML ja ominaisuus.
- Lue pistemäärä tai voittaja ja syy, miksi muut säännöt hävisivät.
Kysymykset
Miten spesifisyys lasketaan?
Jokainen id-tunnus lisää 1,0,0, jokainen luokka, attribuutti tai pseudoluokka 0,1,0 ja jokainen elementtinimi tai pseudoelementti 0,0,1. Yleisvalitsin ja :where() eivät lisää mitään.
Miten :is(), :not() ja :has() lasketaan?
Ne lasketaan vahvimman argumenttinsa mukaan. Siis :is(#a, .b) p saa pistemäärän 1,0,1, koska #a on vahvin osa :is()-funktion sisällä. Säännön :where(#a) p pistemäärä on 0,0,1.
Miksi kerrokseen kuuluva sääntö häviää tavalliselle säännölle?
Tavallisissa ilmoituksissa sääntö, joka ei kuulu mihinkään kerrokseen, voittaa kerroksessa olevat säännöt. !important kääntää järjestyksen, joten aiempi kerros voittaa. Tavallinen style-attribuutti voittaa kaikki tavalliset tyylitiedoston säännöt, ja !important-style-attribuutti voittaa kaikki muut !important-säännöt.
Lähetetäänkö CSS-koodini jonnekin?
Ei. Selaimesi jäsentää ja vertaa valitsimet tässä välilehdessä, eikä mitään lähetetä palvelimelle.
Arvostelut
Ei vielä arvosteluja. Ole ensimmäinen.