Co to jest selektor CSS?

Degui Adil/Getty Images

CSS opiera się na regułach dopasowywania wzorców w celu określenia, który styl ma zastosowanie do którego elementu w dokumencie. Te wzory są nazywane selektory i wahają się od nazw tagów (na przykład

|_+_| aby dopasować znaczniki akapitów) do bardzo skomplikowanych wzorów, które pasują do bardzo określonych części dokumentu. Na przykład |_+_| pasowałby do dowolnego |_+_| tag z klasą |_+_| to jest element potomny akapitu o identyfikatorze |_+_|Selektor CSS jest częścią wywołania stylu CSS, które określa, jaka część strony internetowej powinna być stylizowana. Selektor zawiera jedną lub więcej właściwości, które definiują sposób wybrania HTML

Selektory CSS

Istnieje kilka różnych typów selektorów:

• selektory typu – pasujące do konkretnego elementu
• selektory klas – dopasowywanie elementów do określonej klasy
• Selektory ID – dopasowanie elementu do konkretnego ID
• selektory potomków – dopasowywanie elementów będących potomkami określonego elementu
• selektory potomne – dopasowujące elementy, które są potomkami danego elementu
• selektory uniwersalne – pasujące do dowolnego elementu
• sąsiednie selektory rodzeństwa – pasujące elementy bezpośrednio poprzedzone określonym elementem
• selektory atrybutów – dopasowanie elementów do określonego atrybutu lub wartości atrybutu
• selektory pseudoklas – dopasowanie elementów do konkretnej pseudoklasy
• selektory pseudoelementów – dopasowywanie elementów o określonych właściwościach pseudoelementów

Formatuj style CSS i selektory CSS

Format Styl CSS wygląda tak:

|_+_|

Oddziel wiele selektorów o tym samym stylu przecinkami. Nazywa się to grupowaniem selektorów. Na przykład:

|_+_|

Selektory grupujące to skrócony mechanizm, dzięki któremu Twoje style CSS są zwarte. Powyższe grupowanie miałoby taki sam efekt jak:

|_+_|

Zawsze testuj swoje selektory CSS

Nie wszystkie starsze przeglądarki obsługują wszystkie selektory CSS. Jeśli konfigurujesz CSS do użytku z przeglądarkami tak starymi jak IE8 lub starszymi, przetestuj swoje selektory w tylu przeglądarkach w tylu systemach operacyjnych, ile Twoim zdaniem mogą być użyte do uzyskania dostępu do Twojego kodu. Jeśli korzystasz z CSS1, CSS2 , lub selektory CSS3 do użytku z obecnymi przeglądarkami, powinno być dobrze.