Specyficzność w CSS

CSS może być stosowany do dowolnego elementu na wiele sposobów (wbudowany, wewnętrzny i zewnętrzny). Co jeśli zastosujemy style do tego samego elementu za pomocą różnych środków (za pomocą inline, używając ID lub klasy itp.)? W takim przypadku zjawisko specyficzności CSS jest w praktyce i wybiera selektor CSS, który ma najwyższą wartość swoistości. Pojęcie specyficzności jest jak pierwszeństwo operatora w językach programowania.

Biorąc pod uwagę znaczenie swoistości, ten przewodnik krótko pokazuje pracę i wykorzystanie specyficzności w CSS.

1. Jak działa specyficzność CSS
2. Wartość specyfiki selektorów CSS

Jak działa specyficzność w CSS

Działanie swoistości zależy od selektorów CSS lub rodzaju używanego CSS. W tej sekcji rozważano porównanie specyfiki w następujący sposób:

• Wbudowane CSS, wewnętrzne CSS i zewnętrzne CSS
• Selektory CSS (ID, klasa, klasy pseudo, pseudo elementy itp.)

Arkusz stylów może być wbudowany, wewnętrzny lub zewnętrzny, a następujące jest poziom specyficzności tych arkuszy stylów.

Z powyższego równania stwierdza się, że wbudowany CSS ma najwyższą swoistość w porównaniu z wewnętrznym i zewnętrznym CSS.

Teraz zbadajmy, w jaki sposób są zbierane style, jeśli istnieje wiele selektorów CSS dla tego samego elementu. Specyficzność różnych selektorów CSS jest zdefiniowana przez następujące równanie.

Do tej pory porównanie teoretyczne zostało wycofane. Miejmy pewne ilościowe porównanie wyniku swoistości i ten wynik specyficzności jest obliczany przez przeglądarki w następujący sposób.

Aby to zrobić, te, dziesiątki, setki i tysiące koncepcji liczenia są stosowane na selektorach CSS, aby uzyskać określoną wartość. Tak, że przypisany jest selektor (element) najmniejszy, a najwyższy selektor specyficzności (inline) przypisuje się 1000. Poniższa tabela odnosi się do wyniku swoistości różnych selektorów CSS.

Ćwiczyliśmy kilka przykładów wycofanych z koncepcji podanej w powyższej tabeli.

Za pomocą informacji podanych w powyższych tabelach lepiej zrozumiałbyś pojęcie specyficzności w CSS. Umknijmy je przy użyciu następujących przykładów

Przykład 1: Używanie wielu selektorów CSS dla jednego elementu

Ten przykład praktykuje różne selektory CSS, aby stylizować element „P”.

Html

Korzystanie z koncepcji specyficzności

W powyższym kodzie HTML akapit jest przypisany id = ”jeden” i class = ”specyfikacja”.

CSS

W powyższym CSS, „Klasa”, „id” i „element” są używane jako selektory CSS dla "P". Każdy selektor CSS zamierza zmienić kolor tła "P" element.

Wyjście

Z wyjścia obserwuje się, że kolor tła jest niebieski, który został ustawiony przez id = ”jeden” elementu „P”.

Przykład 2: Używanie selektorów o tej samej specyficzności

Istnieje możliwość, że selektory CSS zbliżają się do elementu. W takim przypadku rozważane jest występowanie selektora CSS, a późniejszy selektor jest wybierany do stylizacji.

Ten przykład pokazuje ten sam scenariusz za pomocą następującego kodu.

Html

Korzystanie z selektorów o tej samej specyficzności

CSS

W powyższym kodzie CSS używane są dwa selektory identyfikacyjne z różnymi stylami. #Spec występujący wcześniej ma tylko właściwość koloru tła, podczas gdy #spec Później ma wiele właściwości CSS.

Wyjście

Z wyjścia obserwuje się, że id = ”Spec” Wybierane jest selektor występujący bocznie, a zawarte przez niego właściwości są stosowane do elementu akapitowego.

Wniosek

Ilekroć wiele selektorów CSS próbuje wpływać na element, zjawisko specyficzności decyduje, który styl ma być stosowany. Specyficzność w CSS odgrywa kluczową rolę, ponieważ złożone arkusze stylów może zawierać wiele selektorów dla każdego elementu. Ten artykuł pokazuje pojęcie specyficzności w CSS. Ponadto dowiesz się również, w jaki sposób obliczany jest wynik specyfiki CSS. Za pomocą tego możesz obliczyć ocenę swoistości przed użyciem dowolnego selektora CSS.