Istnieje wiele sposobów, dzięki którym możesz stylizować elementy HTML. Jednym z takich łatwych i potężnych podejść jest użycie selektorów atrybutów CSS. Te selektory umożliwiają stylowanie elementów mających niektóre atrybuty lub wartości atrybutów. Te selektory są następujące.

1. [atrybut] selektor
2. [atrybut = „wartość”] selektor
3. [atrybut ~ = „wartość”] selektor
4. [atrybut | = „wartość”] selector
5. [atrybut^= „wartość”] selector
6. [atrybut $ = „wartość”] selector
7. [atrybut*= „wartość”] selector

Każdy z nich jest szczegółowo wyjaśniony poniżej.

[atrybut] selektor

Do celów stylizacji elementów, które mają określony atrybut, używany jest selektor [atrybut].

Składnia

element [atrybut]
wartość nieruchomości;

Lub,

[atrybut]
wartość nieruchomości;

Przykład

Załóżmy, że chcesz stylizować wszystkie elementy mające atrybut Alt, Następnie użyj selektora [atrybut] w następujący sposób.

Html

To jest nagłówek

To jest akapit.

W powyższym kodzie utworzyliśmy dwa elementy

I

.

przypisano klasę atrybutu, podczas gdy

Elementowi przypisano atrybut alt.

CSS

[alt]
Styl czcionki: Kursywa;

Teraz, używając selektora [atrybut], stylizujemy tylko te elementy za pomocą atrybutu alt. W tym przypadku, ponieważ tylko

Element ma atrybut alt, zatem reguła stylu będzie stosowana tylko w akapicie.

Wyjście

Elementy z atrybutem alt zostały stylizowane.

[atrybut = „wartość”] selektor

Atttibutes mają zatem pewną wartość, aby stylizować element o określonym atrybucie i wartości, używamy selectora [atrybut = „wartość”].

Składnia

element [atrybut = "wartość"]
wartość nieruchomości;

Lub,

[atrybut = "wartość"]
wartość nieruchomości;

Przykład

Załóżmy, że chcesz stylizować niektóre elementy o konkretnym atrybucie i wartości. Postępuj zgodnie z przykładem poniżej.

Html

Składać

Tutaj utworzyliśmy pole wejściowe, a także przycisk. Oba elementy mają atrybut według klasy nazwy, jednak wartości obu atrybutów klasowych są różne.

CSS

[class = "input"]
kolor tła: różowy;
Rozmiar czcionki: 20px;

[class = "btn"]
Wyściółka: 3px;
granica: 1px Solid Black;

W powyższym kodzie używamy selektora [atrybut = „wartość”] do stylizowania zarówno pola wejściowego, jak i przycisku.

Wyjście

Oba elementy były z powodzeniem stylu.

[atrybut ~ = „wartość”] selektor

Istnieją pewne atrybuty, które mają listę wartości oddzielonych na przykład w przestrzeni, klasa = „Hello World”. Teraz, aby stylizować elementy o takich wartościach atrybutów, używany jest selektor [atrybut ~ = „wartość”]. Stykuje elementy, których wartość atrybutu pasuje do jednej z tych wartości.

Składnia

element [atrybut ~ = "wartość"]
wartość nieruchomości;

Lub,

[atrybut ~ = "wartość"]
wartość nieruchomości;

Przykład

Poniższy przykład pokazuje działanie omawianego selektora.

Html

To jest nagłówek

To jest akapit.

To kolejny akapit.

W powyższym kodzie zdefiniowaliśmy trzy elementy. Każdy z tych elementów ma ten sam atrybut, jednak różne wartości.

CSS

[class ~ = "head"]
kolor fioletowy;

[class ~ = "para"]
Rozmiar czcionki: 20px;
Styl czcionki: Kursywa;

Korzystając z selektora [atrybut ~ = „wartość”], stylizujemy nagłówki i akapity. Jak widać, wartość atrybutu każdego

Element jest listą wartości oddzielonych przestrzenią, jednak słowo kluczowe „para” istnieje w obu wartościach, dlatego reguły stylu zdefiniowane dla wartości atrybutu „para” zostaną zastosowane do obu akapitów.

Wyjście

Selektor [atrybut ~ = „wartość”] działa poprawnie.

[atrybut | = „wartość”] selector

Do celów elementów stylistycznych z atrybutami mające wartości oddzielone łącznikiem, używany jest selektor [atrybut | = „wartość”].

Składnia

element [atrybut | = "wartość"]
wartość nieruchomości;

Lub,

[atrybut | = "wartość"]
wartość nieruchomości;

Przykład

Postępuj zgodnie z poniższym przykładem, aby zrozumieć działanie selektora [atrybut | = „wartość”].

Html

To jest nagłówek

To jest akapit.

To kolejny akapit.

i pierwszy

Element ma wartość atrybutu oddzieloną przez łącznika, jednak wartość atrybutu ostatniego

Element nie jest oddzielony łącznikiem.

CSS

[class | = "Linux"]
kolor tła: bisque;
Styl czcionki: Kursywa;

Teraz ten selektor zastosuje zasady stylu tylko do nagłówka i pierwszego akapitu, ponieważ tylko te dwa elementy mają wartość atrybutu, która jest oddzielona.

Wyjście

Zasady stylu zostały zastosowane

i pierwszy

element.

[atrybut^= „wartość”] selector

W celu stylizacji elementów z atrybutami o określonej wartości początkowej, selektor [atrybut^= „wartość”]. Wartość niekoniecznie jest całym słowem.

Składnia

element [atrybut^= "wartość"]
wartość nieruchomości;

Lub,

[atrybut^= "wartość"]
wartość nieruchomości;

Przykład

Użyjemy tego samego przykładu, który użył w powyższej sekcji, aby wyczyścić koncepcję [atrybut^= „wartość”] selector.

Html

To jest nagłówek

To jest akapit.

To kolejny akapit.

Zauważ, że każdy z powyższych elementów ma wartość atrybutu, zaczynając od słowa Linux.

CSS

[class ^= "Linux"]
kolor tła: bisque;
Styl czcionki: Kursywa;

Teraz ten selektor stylizuje wszystkie elementy, ponieważ każdy z nich ma tę samą wartość atrybutu początkowego.

Wyjście

Selektor [atrybut ^= „wartość”] działa poprawnie.

[atrybut $ = „wartość”] selector

W celu stylizacji elementów z atrybutami o określonej wartości końcowej, selektor [atrybut $ = „wartość”]. Wartość niekoniecznie jest całym słowem.

Składnia

element [atrybut $ = "value"]
wartość nieruchomości;

Lub,

[atrybut $ = "value"]
wartość nieruchomości;

Przykład

Śledź poniższy przykład, aby zrozumieć działanie tego selektora atrybutów.

Html

Jakiś tekst.
Jakiś tekst.
Jakiś tekst.

Tutaj stworzyliśmy trzy elementy div. Pierwszymi dwoma elementami Div przypisano wartość atrybutu kończącą się słowem kluczowym „Div”.

CSS

[class $ = "div"]
kolor tła: beż;
Wyściółka: 10px;
Rozmiar czcionki: 20px;
Styl czcionki: Kursywa;

[Atrybut $ = „wartość”] zastosuje powyższe reguły stylu tylko do dwóch pierwszych elementów div.

Wyjście

Pierwsze dwa elementy div zostały stylizowane przy użyciu selektora [atrybut $ = „wartość].

[atrybut*= „wartość”] selector

Do celów stylizacji wszystkich elementów z wartościami atrybutów posiadających określone słowo kluczowe, używany jest selektor [atrybut *= „wartość”].

Składnia

element [atrybut *= "wartość"]
wartość nieruchomości;

Lub,

[atrybut *= "wartość"]
wartość nieruchomości;

Przykład

Załóżmy, że chcesz stylizować niektóre elementy za pomocą selektora [atrybut*= „wartość”]. Postępuj zgodnie z poniższym kodem.

Html

To jest akapit.

To kolejny akapit.

Stworzyliśmy dwa

elementy mające odpowiednio wartości atrybutu „para1” i „para2”.

CSS

[class *= "ar"]
kolor tła: bisque;
Styl czcionki: Kursywa;

Ten selektor atrybutów wykryje dowolną wartość atrybutu za pomocą słowa kluczowego „AR” i zastosuje powyższe reguły stylu na tym elemencie.

Wyjście

Selektor [atrybut*= „wartość”] działa poprawnie.

Wniosek

Możesz stylizować elementy HTML, które mają określone atrybuty lub wartości atrybutów. Istnieje łącznie siedem selektorów atrybutów CSS, które to: [atrybut] selektor, [atrybut = „wartość”], [atrybut ~ = „wartość”] selektor, [atrybut | = „wartość”] selektor, [atrybut ^= ” wartość ”] selektor, [atrybut $ =„ wartość] selektor i [atrybut *= „wartość”] selector. Wszystkie selektory służą innym celowi, który szczegółowo omówiliśmy w tym poście wraz z odpowiednimi przykładami.