Specyficzność CSS

Co to jest specyficzność?

Jeśli istnieją dwie lub więcej konfliktujących reguł CSS kierujących się do tego samego elementu, przeglądarka będzie stosować pewne zasady, aby określić, która jest najbardziej specyficzna i zatem zwycięska.

Traktowanie specyficzności (specificity) jako punktów/stopnia pozwala określić, które deklaracje stylu zostaną zastosowane do elementu.

Uniwersalny selektor (*) ma niższą specyficzność, podczas gdy selektor ID ma wyższą specyficzność!

Uwaga:Taka specyficzność jest częstym powodem, dla którego reguły CSS nie są stosowane dla niektórych elementów, chociaż można by sądzić, że powinny być stosowane.

Hierarchia specyficzności

Każdy selektor ma swoje miejsce w hierarchii specyficzności. Poniżej wymienione cztery kategorie definiują poziom specyficzności selektorów:

Wewnętrzne style - Wewnętrzne (wewnętrzne) style są bezpośrednio附加 do elementów, które mają być stylizowane. Przykład: <h1 style="color: #ffffff;">.

ID - ID jest unikalnym identyfikatorem elementu strony, na przykład #navbar.

Klasy, atrybuty i pseudo-klasy - Ta kategoria obejmuje .klasy, [atrybuty] i pseudo-klasy, takie jak :hover, :focus itp.

Elementy i pseudo-elementy - Ta kategoria obejmuje nazwy elementów i pseudo-elementy, takie jak h1, div, :before i :after.

Jak obliczyć specyficzność?

Pamiętaj, jak obliczać specyficzność!

Zaczynając od 0, dodaj 1000 do atrybutu style, 100 do każdego ID, 10 do każdego atrybutu, klasy lub pseudo-klasy, a 1 do każdego nazwy elementu lub pseudo-elementu.

Pomyśl o poniższych trzech fragmentach kodu:

Przykład

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • Specyficzność A wynosi 1 (jeden element)
  • Specyficzność B wynosi 101 (jeden ID oraz jeden element)
  • Specyficzność C wynosi 1000 (wewnętrzne style)

Ponieważ 1 < 101 < 1000, trzecia reguła (C) ma wyższą specyficzność i zostanie zastosowana.

Reguła specyficzności 1:

W przypadku tej samej specyficzności: najnowsza reguła jest ważna - Jeśli ta sama reguła zostanie wpisana dwa razy do zewnętrznego arkusza stylów, reguła zapisana ostatnia będzie bliżej elementu, który ma być stylizowany, więc zostanie zastosowana:

Przykład

h1 {background-color: yellow;}
h1 {background-color: red;}

Spróbuj sam

Kolejna reguła zawsze obowiązuje.

Reguła specyficzności 2:

Selektory ID mają wyższą specyficzność niż selektory atrybutów - Zobacz poniższe trzy linie kodu:

Przykład

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Spróbuj sam

Pierwsza reguła jest bardziej szczegółowa niż dwie inne, więc zostanie zastosowana.

Reguła specyficzności 3:

selektory kontekstowe są bardziej szczegółowe niż selektory pojedynczych elementów - Wewnętrzne arkusze stylów są bliżej elementów, które mają być stylizowane. W następujących przypadkach:

Przykład

Pochodzące z zewnętrznego pliku CSS:

#content h1 {background-color: red;}

W pliku HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

Zastosuje się następna reguła.

Reguła specyficzności 4:

Selektory klasy pokonują dowolną liczbę selektorów elementów - Selektor klasy (np. .intro wygrywa z h1, p, div itp.):

Przykład

.intro {background-color: yellow;}
h1 {background-color: red;}

Spróbuj sam

Oprócz tego,Ogólne selektory oraz dziedziczone wartości mają specyficzność 0 - Specyficzność * oraz body * i podobne mają specyficzność 0. Specyficzność wartości dziedziczonych również wynosi 0.