Wprowadzenie do rodzajów selektorów CSS
Rodzaje selektorów CSS służą do wybierania treści, które chcemy stylizować. Pomaga w wyborze elementów na podstawie ich klasy, identyfikatora, typu itp. Selektor CSS jest składnikiem zestawu reguł CSS.
Rodzaje selektorów CSS
Dostępnych jest 5 odmian selektorów CSS. Będziemy patrzeć na następujące ważne selektory CSS:
- CSS Universal Selector.
- Selektor elementów CSS.
- Selektor identyfikatora CSS.
- Selektor klas CSS.
- Selektor atrybutów CSS.
1. Uniwersalny selektor CSS
Na stronie HTML treść zależy od tagów HTML. Para tagów określa określony element strony internetowej. Uniwersalny selektor CSS wybiera wszystkie elementy na stronie internetowej.
Przykład:
* (
color: blue;
font-size: 21px;
)
Te dwa wiersze kodu otoczone nawiasami klamrowymi wpłyną na wszystkie elementy obecne na stronie HTML. Deklarujemy uniwersalny selektor za pomocą gwiazdki na początku nawiasu klamrowego. Selektor uniwersalny może być używany razem z innymi selektorami w połączeniu.
2. Selektor elementów CSS
Selektor elementów CSS jest również znany jako Selektor typów. Selektor elementów w CSS próbuje dopasować elementy HTML o tej samej nazwie. Dlatego selektor
- pasuje do wszystkich
A
B
C
A
B
C
A
B
C- 1
- 2)
- 3)
- Ściągawka CSS3
- Pytania do wywiadu CSS
- SASS vs SCSS
- Pytania do wywiadu SASS
- Przykłady listy uporządkowanej HTML
- elementy, tj. wszystkie nieuporządkowane listy na tej stronie HTML.
Spójrzmy na przykład selektora elementów.
ul (
border: solid 1px #ccc;
)
Aby to lepiej zrozumieć, spójrzmy na przykładowy kod HTML, aby zastosować kod CSS, który napisaliśmy powyżej.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Tekst demonstracyjny
W tym przykładzie znajdziemy głównie trzy elementy, a mianowicie
- element, znacznik i inny
- element. Ponieważ nasz kod CSS dotyczy
- tag, zmiany na granicy zostaną wykonane tylko dla naszego
- tagi, a nie tagi. Zazwyczaj zmiany te nie dotyczą treści
- tagi również, ale w niektórych scenariuszach style mogą mieć zastosowanie do elementów wewnętrznych.
3. Selektor identyfikatora CSS
Selektor identyfikatora CSS pomaga programistowi dopasować identyfikator utworzony przez programistę do zawartości stylu. Selektor identyfikatora jest używany za pomocą znaku skrótu (#) przed nazwą identyfikatora zadeklarowaną przez programistę. Selektor identyfikatora pasuje do każdego elementu HTML mającego atrybut identyfikatora o wartości takiej samej jak wartość selektora, bez znaku skrótu.
Oto przykład:
#box (
width: 90px;
margin: 10px;
)
Tego kodu CSS można użyć do dopasowania elementu o identyfikatorze „box”, jak w poniższym zdaniu.
Tutaj tag jest tylko przykładem. Możemy napisać atrybut ID dla dowolnego znacznika HTML. Selektor ID dopasowuje atrybut ID w elemencie i szuka jego stylu. W naszym przykładzie stylizacja obowiązuje tak długo, jak długo dowolny element zawiera atrybut „box”.
Wartość użytego identyfikatora powinna być unikalna. Jeśli ten sam identyfikator zostanie użyty dla dwóch lub więcej elementów, kod jest technicznie niepoprawny, ale styl elementu nadal będzie obowiązywał, dlatego zwykle nie ma takiego samego identyfikatora.
Konieczność użycia innego identyfikatora za każdym razem dla każdej strony HTML jest dość sztywna. Oprócz problemów ze sztywnością, selektory ID w CSS również stają przed problemem specyficzności.
4. Selektor klas CSS
Selektor klas CSS jest jednym z najbardziej pomocnych selektorów ze wszystkich selektorów. Deklarowany jest za pomocą kropki, po której następuje nazwa klasy. Ta nazwa klasy jest definiowana przez program kodujący, podobnie jak w przypadku selektora ID. Selektor klas wyszukuje każdy element mający wartość atrybutu o tej samej nazwie co nazwa klasy, bez kropki.
Przykład:
.square (
margin: 20px;
width: 20px;
)
Tego kodu CSS można użyć do dopasowania elementu o kwadracie klasy, jak w poniższym zdaniu.
Ten styl ma również zastosowanie do wszystkich innych elementów HTML mających wartość atrybutu dla klasy jako „kwadrat”. Element mający tę samą wartość atrybutu klasy pomaga nam w ponownym użyciu stylów i pozwala uniknąć niepotrzebnego powtarzania. Dodatkowo Selektor klas jest korzystny, ponieważ pozwala nam dodać kilka klas do konkretnego elementu. Możemy dodać do atrybutu więcej niż jedną klasę, oddzielając każdą klasę spacją.
Przykład:
Tutaj kwadrat, pogrubienie i kształt to trzy różne typy klas.
5. Selektor atrybutów CSS
Selektor CSS Atrybut stylizuje zawartość zgodnie z atrybutem i wartością atrybutu wymienioną w nawiasach kwadratowych. Przed otwierającym nawiasem kwadratowym nie może być żadnych spacji.
input(type="text") (
background-color: #fff;
width: 100px;
)
Ten kod CSS byłby zgodny z następującym elementem HTML.
Podobnie, jeśli wartość atrybutu „typ” ulegnie zmianie, selektor Atrybutu nie będzie go pasował. Na przykład selektor nie będzie pasował do atrybutu, jeśli wartość „type” zmieni się z „text” na „upload”. Jeśli selektor atrybutu zostanie zadeklarowany tylko z atrybutem i bez wartości atrybutu, będzie pasował do wszystkich elementów HTML z atrybutem „typ”, niezależnie od tego, czy wartością jest „tekst”, czy „prześlij”.
Przykład:
input(type) (
background-color: #fff;
width: 100px;
)
Możemy również skorzystać z selektorów atrybutów bez specyfikacji wartości poza nawiasami kwadratowymi. Pomoże nam to kierować tylko ten atrybut, niezależnie od elementu. W naszym przykładzie będzie on kierowany na podstawie atrybutu „typ”, niezależnie od elementu „input”. Selektory CSS pomagają nam uprościć nasz kod oraz umożliwiają nam wykorzystanie i ponowne użycie tego samego kodu CSS do różnych elementów HTML. Pomagają nam w stylizacji określonych segmentów i części naszej strony internetowej. Zapewniają nam możliwość jednolitego stylizowania podobnych elementów na naszej stronie internetowej. Selektory CSS są zatem ważną częścią krzywej uczenia się CSS.
Polecane artykuły
To był przewodnik po typach selektorów CSS. Tutaj omówiliśmy na przykład różne typy selektorów CSS. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -