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ę:

1. Hierarchia swoistości w CSS
2. 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.

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.