Jaki jest kolejność pierwszeństwa dla CSS?
Właściwość, która ma wyższe pierwszeństwo, jest wykonywana przed tym z niższym pierwszeństwo. Istnieje więc lista, w której nieruchomości CSS są uszeregowane na podstawie ich pierwszeństwa.
Właściwości CSS zaliczane od najwyższego do najniższego pierwszeństwa
Pierwszeństwo elementów CSS od wyższej do niższej rangi w kolejności jest następujące:
- !ważna własność
- Właściwość CSS ustawiona bezpośrednio na elemencie
- Połączone selektory
- Selektor identyfikatora
- Selektor klas
- Selektor atrybutu
- Selektor elementu
- *
- Odziedziczone style
Krótki opis każdej właściwości
Omówmy szczegółowo te właściwości i elementy CSS w kolejności ich pierwszeństwa.
!ważna zasada
Tam jest "!ważny”Rządzi w CSS, że jeśli istnieje, jest wykonywane przed wszystkimi innymi właściwościami CSS. Deklaruje określoną właściwość jako najwyższego pierwszeństwa lub instruuje kompilatora o priorytecie określonej właściwości podczas wykonywania kodu. Właściwość zawierająca „!ważny„Zasada będzie miała najwyższe pierwszeństwo wśród wszystkich innych zasad.
Nieruchomość, która ma „!ważny”Reguła dominuje nad innymi właściwościami. W rzeczywistości „!ważny”Reguła zastępuje znaczenie innych właściwości.
Napiszmy fragment kodu, aby zrozumieć wpływ tego „!ważny”Zasada w dokumencie. Oto fragment kodu HTML, który wprowadza trzy proste zdania w wyjściu:
To jest linia 1
To jest linia 2
To jest linia 3
Dodajemy trzy właściwości stylu CSS, aby ustawić różne kolory tła dla każdego:
.myClass tło kolor: czerwony;#MyId tło kolor: zielony;
P kolor tła: żółty !ważny;
Wygląda na fragment kodu, jakby ustawił trzy różne kolory tła dla każdego, ale „!ważny”Reguła wstawiona dla właściwości, która ustawia kolor tła żółty dominuje nad wszystkimi innymi właściwościami, a interfejs wyjściowy będzie następujący:
Jednak czasami „!ważny„Własność nie działa poprawnie z powodu wielu”!ważny”Reguły tego samego rodzaju właściwości.
Właściwości CSS są wykonywane na podstawie ich pierwszeństwa. Po "!ważny”Zasada, wszystkie właściwości są wykonywane zgodnie z deklarowanym pierwszeństwem.
Właściwość CSS ustawiona bezpośrednio na elemencie
Gdy istnieje właściwość CSS, która jest ustawiona bezpośrednio na elemencie w elemencie stylu CSS, będzie miała najwyższe pierwszeństwo w porównaniu z wszystkimi innymi właściwościami.
Połączone selektory
Mają one mniejszą specyficzność i znaczenie niż selektory elementu bezpośrednie, ale większa specyficzność niż inne właściwości i.E identyfikator id, selektor klasy i selektor atrybutów.
Selektor identyfikatora
Ma wyższą specyficzność niż selektory klasy i atrybutów i niższe niż połączone selektory.
Selektor klas
Ma niższe pierwszeństwo niż selektor id i wyższe pierwszeństwo niż niektóre inne właściwości, takie jak wybór atrybutu i elementu.
Selektor atrybutu
Atrybut ma pierwszeństwo wyższe niż w przypadku selektora elementu i niższe pierwszeństwo niż w przypadku selektora klasy.
Selektor elementu
Selektory elementów mają pierwszeństwo niż selektory atrybutu, klasy i identyfikatora.
All Sector ( *)
Ma najniższe pierwszeństwo wśród wszystkich selektorów w elemencie stylu CSS.
Odziedziczone style
Ponieważ odziedziczone style odnoszą się do rodzica, a nie do samego elementu docelowego, ma on najniższe pierwszeństwo na liście wszystkich właściwości stylu w CSS.
Wyjaśniono powyżej lista kolejności pierwszeństwa elementów stylu CSS.
Wniosek
Podobnie jak wszystkie inne języki kodowania CSS ma również kolejność pierwszeństwa. Podczas dodawania właściwości CSS w dowolnym dokumencie, przeglądarka musi wyczyścić konflikt, który nieruchomość powinna zostać wykonana przed drugą i która właściwość całkowicie zastępuje pozostałe właściwości. Tak więc przeglądarka musi wykonać kod zgodnie z kolejnością pierwszeństwa CSS.