Przewodnik dla początkujących po specyfice CSS

Czy kiedykolwiek próbowałeś zastąpić regułę CSS, ale okazało się, że nie działa ona tak, jak powinna? Lub zauważyłeś, że gdy jeden element jest wielokrotnie kierowany za pomocą różnych kombinacji selektorów CSS, stosowana jest tylko jedna reguła na raz? Wszystko to dzięki regułom specyficzności CSS.

Reguły specyficzności CSS mogą być jedną z najbardziej mylących koncepcji do zrozumienia, szczególnie dla początkujących.

Jeśli dopiero zaczynasz z CSS, jako standardową regułę kolejności, możesz pomyśleć, że najnowsza reguła CSS powinna zastąpić starą. Wydaje się to proste, ale nie zawsze tak jest. To zależy od specyfiki CSS, kiedy i która reguła CSS powinna obowiązywać.

Przyjrzyjmy się zatem, czym jest specyfika CSS i jak efektywnie z niej korzystać.

Czym jest specyficzność w CSS?

Mówiąc prościej, jeśli masz wiele selektorów CSS dla jednego elementu, zastosowany zostanie ten z wyższą określoną wartością.

Różne selektory mają różne wagi, a przeglądarka zdecyduje, który z nich jest najbardziej odpowiedni dla danego elementu.

Jak to działa?

Specyfikę selektora można podzielić na cztery poziomy:

1. Styl wbudowany lub CSS
2. identyfikatory
3. Klasy, pseudoklasy i atrybuty
4. Elementy lub pseudoelementy

Style wbudowane lub CSS , w których CSS jest stosowany bezpośrednio w dokumencie HTML, wyglądają tak <p> . Style wbudowane zawsze będą miały najwyższy poziom szczegółowości.

Na drugim miejscu w tej kolejności są identyfikatory , takie jak #content . Tak więc każdy selektor używający identyfikatora będzie miał drugi najwyższy poziom specyficzności.

Klasy , pseudoklasy i atrybuty są trzecie w tej kolejności. Wyglądają odpowiednio: .post , :hover i [title] .

Elementy i pseudoelementy mają najmniejszą wartość. li i :after to podstawowe przykłady elementu i pseudoelementu.

Kalkulacja

Wartość specyficzności można obliczyć zgodnie z następującymi wytycznymi:

• Styl wbudowany lub css: 1,0,0,0
• Identyfikator: 0,1,0,0
• Klasa lub pseudoklasa i atrybut: 0,0,1,0
• Elementy i pseudoelementy: 0,0,0,1
• Selektor uniwersalny(*): 0

Aby sprawdzić poziom specyficzności selektora, możesz skorzystać z Kalkulatora specyficzności.

Podstawowe zasady specyficzności CSS

Teraz, gdy masz pojęcie o tym, jak zorganizowana jest specyficzność, omówmy kilka ogólnych zasad i przykładów!

To jest podstawowy kod HTML, którego użyję w moich przykładach. Tutaj mam małą listę w kontenerze z #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Zasada nr 1

Jeśli masz dwa lub więcej takich samych selektorów dla elementu, wszystkie będą miały tę samą wartość specyficzności, stąd zastosowany zostanie niższy lub ostatni.

W poniższym fragmencie CSS oba selektory mają taką samą specyficzność, więc kolor li będzie żółty, ponieważ jest umieszczony dalej w linii.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Zasada 2

Jeśli dla jednego elementu zostanie użytych wiele selektorów, zastosowany zostanie selektor o wyższej określonej wartości.

W poniższym przykładzie li jest celem dwóch różnych selektorów i oba wpływają na kolor czcionki. Więc, który przepis powinien obowiązywać?

Podobnie jak w poprzednim przypadku, w koncepcji porządku CSS powinien obowiązywać drugi (więc kolor li byłby zielony), ale ponieważ .list li ma wyższą wartość specyficzności niż ul li , kolor pozostanie czerwony.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Zasada 3

Widzieliśmy, że klasa przeważa nad elementami na poziomie specyficzności, teraz zobaczmy, co dzieje się z identyfikatorem.

W poniższym przykładzie mamy klasę i identyfikator, które dotyczą tego samego elementu i wpływają na kolor czcionki. Znowu to samo pytanie: która zasada powinna obowiązywać?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Jak wspomniano wcześniej, ID ma wyższą wartość specyficzności niż klasa, atrybuty i elementy, więc kolor będzie niebieski. Zawsze wybieraj identyfikator celu dla wyższego poziomu szczegółowości.

Zasada 4

!important zastąpi dowolny selektor o dowolnej wartości specyficzności. Ale pamiętaj, że !important nie powinno być nadużywane, ponieważ nie jest uważane za najlepszą praktykę CSS.

Jeśli jesteś autorem swojego CSS i nie nadpisujesz istniejącej reguły, raczej nie będziesz musiał używać !important .

Używaj !important tylko wtedy, gdy próbujesz zastąpić czyjś CSS, a twoja specyfika nie jest w stanie przeważyć nad poprzednim selektorem, zwłaszcza gdy nie możesz kontrolować kolejności umieszczania swojego CSS w HTML.

Stanie się tak głównie podczas pracy w WordPressie, gdzie znajdziesz wiele plików CSS już dodanych przez różne wtyczki i motywy.

Ogólnie rzecz biorąc, CSS wtyczek jest specyficzny dla wtyczki i używa identyfikatorów, inline-css, a nawet !important dla większej szczegółowości, aby uniknąć konfliktu CSS. Aby zastąpić ten CSS, musisz użyć jeszcze większej specyficzności; dla tych scenariuszy możesz użyć !important .

W poniższym przykładzie odtwarzam poprzednie scenariusze, z celowaniem li za pomocą różnych selektorów CSS, ale widać, że !important zastępuje wszystkie reguły, a kolor będzie żółty.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important da ci moc egzekwowania twojego CSS powyżej dowolnego poziomu szczegółowości.

Musisz być ostrożny używając !important ponieważ nie możesz zmienić tej reguły. Jedynym sposobem na zastąpienie !important jest użycie innego !important później w CSS, więc twój CSS może łatwo wyglądać niechlujnie, jeśli nie rozumiesz jego mocy.

Kilka wyjątków

Elementy i pseudoelementy mają najmniejszą specyficzność, ale jest kilka interesujących (i nieco mylących!) wyjątków. (Mylące, ponieważ wydaje się, że nie przestrzegają zasad, które właśnie widzieliśmy).

W tym przykładzie zobaczysz :first-child (pseudo-klasa) i :first-line (pseudo-element). Właśnie dowiedzieliśmy się, że pseudoklasy będą miały większą specyficzność niż pseudoelementy, więc zgodnie z tym kolor pierwszej linii akapitu powinien być zielony, ale zamiast tego będzie różowy.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Możesz pomyśleć, że kolejność będzie tutaj problemem, ale nawet zmiana kolejności nie zmieni wyniku. Kalkulator specyficzności pokazuje inny obraz niż wynik.

W tym miejscu specyfika staje się nieco myląca. Mogę tylko założyć, że powodem tego wyniku jest to :first-line jest bliżej elementu i prawdopodobnie jest traktowany jako styl inline. Możesz sprawdzić jsfiddle dla innego przykładu.

Jak efektywnie wykorzystać specyficzność?

Jeśli rozumiesz zasady specyficzności CSS, możesz używać go bardzo wydajnie i sprawić, by Twój CSS był wielokrotnego użytku.

Powiedzmy, że chcesz użyć tego samego .button , ale z różnymi kolorami tła, więc ustawiasz określony selektor: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Jeśli .button jest opakowany w kontener .red-block , domyślny kolor tła przycisku zmieni się na czerwony.

Specyfika CSS jest bardzo przydatna podczas dostosowywania motywów WordPress, w których próbujesz zastąpić CSS autora motywu własnym.

Typowe błędy, których należy unikać

Niektórzy używają bardzo specyficznych selektorów, co nie jest dobrą praktyką. Bądź tak szczegółowy, jak to konieczne. Na przykład ten fragment kodu dotyczy li , ale jest zbyt szczegółowy.

 [css] div#content ul.list li{ color: purple; } [/css]

Jeśli będziesz zbyt szczegółowy w swoim CSS, stanie się on sztywny i trudniejszy do ponownego użycia. Możesz łatwo napisać .list li zamiast div#content ul.list li , co sprawi, że Twój CSS będzie czystszy.

Dodatkowe zasoby

• W3 org o specyfice
• Kalkulator specyficzności CSS
• Błąd IE
• Hack IE

Wniosek

Jak widać, specyfika CSS jest ważnym narzędziem i każdy front-end developer powinien ją mieć w swoim zestawie narzędzi. Jasne zrozumienie tej koncepcji może znacznie przyczynić się do tego, że staniesz się dobrym programistą front-endowym.