Hierarchia swoistości w CSS | Wyjaśnione
Specyficzność w CSS określa zamówienie selektorów CSS do zastosowania do elementu. Na przykład na element może wpływać różne style CSS, a zatem trudne byłoby dostosowanie się do jednego stylu. Koncepcja specyficzności złagodziła proces decydowania o właściwości CSS, aby wybrać element. Aby to zrobić, następuje hierarchia swoistości, która określa kolejność selektorów CSS zgodnie z wynikiem swoistości.
Ten artykuł zawiera głęboki wgląd w hierarchię swoistości z następującymi wynikami uczenia się:
- Hierarchia swoistości w CSS
- Jak obliczyć wynik hierarchii swoistości
Hierarchia swoistości w CSS
Hierarchia swoistości jest kluczowym składnikiem praktykowania swoistości. Hierarchia swoistości odnosi się do kategorii selektorów CSS i ich kolejności wykonania w CSS. Poniższe cztery grupy odnoszą się
Style wbudowane: Właściwość stylu używana w elemencie i swoistość stylów inline jest większa niż wszystkie inne grupy.
Identyfikator (id): Atrybut id elementu i specyficzności jest jednym krokiem po stylach inline.
Zajęcia, pseudo zajęcia, atrybuty: Ta grupa zawiera klasy, pseudo klasy (takie jak: link ,: Active ,: Focus) i inne atrybuty. Poziom swoistości tej grupy jest o jeden krok w dół od grupy identyfikatorów.
Elementy, pseudo elementy: Ta grupa zawiera elementy (P, H1, Div) i pseudo elementów (:: przed, :: po) . Specyficzność tej grupy jest na najniższym poziomie.
Jak obliczyć wynik hierarchii swoistości
Za koncepcją hierarchii specyficzności istnieje obliczenia matematyczne, które prowadzi do kwantyfikacji specyficzności i ustalenia priorytetu selektora CSS na podstawie tego wyniku. Wynik można obliczyć, postępując zgodnie z poniższym punktem odniesienia.
| Selektor CSS | Wynik hierarchii swoistości |
|---|---|
| Style wbudowane | 1000 |
| Identyfikator (id) | 100 |
| Klasa, pseudo zajęcia, atrybuty | 10 |
| Element, pseudo element | 1 |
Przykład 1: Selektory CSS
Poniższy kod praktykuje różne selektory CSS na jednym elemencie, aby zrozumieć proces hierarchii specyfiki w CSS.
Html
Linuxhint! Dolina samouczków
CSS
W powyższym kodzie CSS trzech selektorów próbuje zmienić kolor tła elementu H3. Pierwszy selektor używa nazwy elementu, podczas gdy drugi i trzeci selektor wykonuje klasę i identyfikator elementu H3.
Wyjście
Jako specyficzność ID jest większy niż klasa i element, Więc ID byłby używany jako selektor CSS.
Przykład 2: Za pomocą hybrydowych selektorów CSS
Może istnieć przypadek, w którym musisz zdefiniować zajęcia o tych samych nazwiskach. W takim scenariuszu selektory hybrydowe są wykonywane, aby jednoznacznie zidentyfikować określony element. Poniższy przykład używa ID i klasa Aby utworzyć selektor hybrydowy.
Html
Linuxhint! Dolina samouczków
Samouczki na temat HTML, CSS, Java, JQuery i JavaScript
Witamy w Linuxhint
Wysokiej jakości dostawca treści
W powyższym kodzie, dwa Div są tworzone, a każda div ma H3 z klasą = ”specyfikację” I p z klasą = ”specyfikację 1”. elementy.
CSS
W powyższym CSS #New .Spec odnosi się do elementu H3 div id = ”nowego”, podczas gdy .Spec odnosi się do wszystkich elementów, które mają klasę = „Spec”.
Pamiętając o obliczeniach, "#nowy ".Spec ”i„.Spec ” mieć następujący wynik.
- #nowy .Spec = 100+10 = 110
- .Spec = 10
Wyjście
Z wyjścia obserwuje się, że selektor CSS „#Div .Spec ” został załadowany, ponieważ jego swoistość jest większa niż ".Spec ”.
Wniosek
Hierarchia swoistości ustawia uporządkowanie dla selektorów CSS, selektor o wyższym wyniku swoistości ma wyższy priorytet w porównaniu z selektorem o niższym wyniku swoistości. W tym artykule zademonstrowaliśmy pojęcie hierarchii specyficzności i opisaliśmy podstawy definiowania hierarchii specyficzności. Style wbudowane mają najwyższy wynik swoistości, a zatem są umieszczone na szczycie drzewa hierarchii swoistości, a następnie ID, klasy i elementu. Ponadto dostarczyliśmy również metodę obliczenia wyniku specyficzności selektorów CSS.