Det er en rekke måter du kan style HTML -elementer. En så enkel og kraftig tilnærming er å bruke CSS -attributt -velgerne. Disse velgerne lar deg style elementer som har noen attributter eller attributtverdier. Disse velgerne er som følger.

1. [attributt] velgeren
2. [attributt = "verdi"] velger
3. [attributt ~ = “Verdi”] Valg
4. [attributt | = “Verdi”] velger
5. [attributt^= “verdi”] velger
6. [Attributt $ = “Verdi”] Valg
7. [attributt*= “Verdi”] Valg

Hver av disse blir forklart i detalj nedenfor.

[attributt] velgeren

For stylingelementer som har en bestemt attributt, brukes [attributt] -velgeren.

Syntaks

element [attributt]
Eiendomsverdi;

Eller,

[Egenskap]
Eiendomsverdi;

Eksempel

La oss si at du vil style alle elementer som har attributt alt, Bruk deretter [attributt] -velgeren på følgende måte.

Html

Dette er en overskrift

Dette er et avsnitt.

I koden ovenfor har vi opprettet to elementer

og

. De

har fått tildelt en attributtklasse, mens

Element har fått tildelt en attributt alt.

CSS

[alt]
Font-stil: kursiv;

Nå bruker vi [attributt] -velgeren bare de elementene med attributtet alt. I dette tilfellet, siden bare

Element har ALT -attributtet, derfor vil stilregelen bare bli brukt på avsnittet.

Produksjon

Elementer med ALT -attributt er stylet.

[attributt = "verdi"] velger

ATTTIBUTS har derfor en viss verdi for å style et element som har en viss attributt og verdi, bruker vi [attributtet = "verdi"] -velgeren.

Syntaks

element [attributt = "verdi"]
Eiendomsverdi;

Eller,

[attributt = "verdi"]
Eiendomsverdi;

Eksempel

Anta at du vil style noen elementer som har en bestemt attributt og verdi. Følg eksemplet nedenfor.

Html

Sende inn

Her har vi opprettet et inngangsfelt, så vel som en knapp. Begge elementene har en attributt etter navneklassen, men verdiene til begge klasseattributtene er forskjellige.

CSS

[class = "input"]
bakgrunnsfarge: rosa;
Font-størrelse: 20px;

[class = "btn"]
polstring: 3px;
Grense: 1px solid svart;

I koden ovenfor bruker vi [Attributt = "Verdi"] -velgeren for å style både inngangsfeltet og knappen.

Produksjon

Begge elementene har vært stil med suksess.

[attributt ~ = “Verdi”] Valg

Det er visse attributter som har en liste over verdier atskilt etter rom, for eksempel klasse = "Hello World". Nå for å styleelementer med slike attributtverdier, brukes [attributtet ~ = "verdi"] -velgeren. Det stiler elementer hvis attributtverdi samsvarer med en av disse verdiene.

Syntaks

element [attributt ~ = "verdi"]
Eiendomsverdi;

Eller,

[attributt ~ = "verdi"]
Eiendomsverdi;

Eksempel

Eksemplet nedenfor demonstrerer arbeidet med velgeren som diskuteres.

Html

Dette er en overskrift

Dette er et avsnitt.

Dette er et annet avsnitt.

I koden ovenfor har vi definert tre elementer. Hvert av disse elementene har samme attributt, men forskjellige verdier.

CSS

[klasse ~ = "head"]
Farge: lilla;

[klasse ~ = "para"]
Font-størrelse: 20px;
Font-stil: kursiv;

Ved hjelp av [attributtet ~ = “Verdi”] -velgeren styler vi overskriften og avsnitt. Som du kan se at attributtverdien til hver

Element er en liste over verdier atskilt med rom, men nøkkelordet "para" eksisterer i begge verdiene, derfor vil stilreglene definert for attributtverdien "para" bli brukt på begge avsnittet.

Produksjon

[Attributtet ~ = “verdi”] -velgeren fungerer som den skal.

[attributt | = “Verdi”] velger

For stylingelementer med attributter som har verdier som er atskilt med bindestrek, brukes [attributtet | = "verdi"] -velgeren.

Syntaks

element [attributt | = "verdi"]
Eiendomsverdi;

Eller,

[attributt | = "verdi"]
Eiendomsverdi;

Eksempel

Følg det nedenfor-nevnte eksemplet for å forstå arbeidet med [attributtet | = “Verdi”] -velgeren.

Html

Dette er en overskrift

Dette er et avsnitt.

Dette er et annet avsnitt.

De

Og den første

Element har en attributtverdi atskilt med bindestrek, men attributtverdien til den siste

elementet skilles ikke med bindestrek.

CSS

[klasse | = "linux"]
Bakgrunnsfarge: Bisque;
Font-stil: kursiv;

Nå vil denne velgeren bare bruke stilregler på overskriften og første ledd fordi bare disse to elementene har en attributtverdi som er atskilt med bindestrek.

Produksjon

Stilreglene er brukt på

Og den første

element.

[attributt^= “verdi”] velger

For å style elementer med attributter som har en spesifikk startverdi, [attributtet^= “verdi”] -velgeren. Verdien er ikke nødvendigvis hele ordet.

Syntaks

element [attributt^= "verdi"]
Eiendomsverdi;

Eller,

[attributt^= "verdi"]
Eiendomsverdi;

Eksempel

Vi kommer til å bruke det samme eksemplet som brukes i delen ovenfor for å fjerne konseptet med [attributtet^= “Verdi”] -velgeren.

Html

Dette er en overskrift

Dette er et avsnitt.

Dette er et annet avsnitt.

Merk at hvert av elementene ovenfor har en attributtverdi som starter med ordet linux.

CSS

[klasse ^= "linux"]
Bakgrunnsfarge: Bisque;
Font-stil: kursiv;

Nå vil denne velgeren style alle elementene fordi hver av dem har samme startattributtverdi.

Produksjon

[Attributtet ^= “verdi”] -velgeren fungerer som den skal.

[Attributt $ = “Verdi”] Valg

For å styleelementer med attributter som har en bestemt sluttverdi, [attributtet $ = “Verdi”] -velgeren. Verdien er ikke nødvendigvis hele ordet.

Syntaks

element [attributt $ = "verdi"]
Eiendomsverdi;

Eller,

[attributt $ = "verdi"]
Eiendomsverdi;

Eksempel

Følg eksemplet nedenfor for å forstå arbeidet med denne attributtvelgeren.

Html

Noe tekst.
Noe tekst.
Noe tekst.

Her har vi laget tre divelementer. De to første divelementene har fått tildelt en attributtverdi som slutter med nøkkelordet “Div”.

CSS

[klasse $ = "div"]
Bakgrunnsfarge: Beige;
polstring: 10px;
Font-størrelse: 20px;
Font-stil: kursiv;

[Attributt $ = “Verdi”] vil bruke ovennevnte stilregler for bare de to første divelementene.

Produksjon

De to første divelementene er stylet ved hjelp av [attributtet $ = “Verdi] -velgeren.

[attributt*= “Verdi”] Valg

For å style alle elementene med attributtverdier som har et spesifikt nøkkelord, brukes [attributtet *= "Verdi"] -velgeren.

Syntaks

element [attributt *= "verdi"]
Eiendomsverdi;

Eller,

[attributt *= "verdi"]
Eiendomsverdi;

Eksempel

Anta at du vil style noen elementer ved å bruke [attributtet*= "verdi"] -velgeren. Følg koden nedenfor.

Html

Dette er et avsnitt.

Dette er et annet avsnitt.

Vi har opprettet to

elementer som har attributtverdier “para1” og “para2”.

CSS

[klasse *= "ar"]
Bakgrunnsfarge: Bisque;
Font-stil: kursiv;

Denne attributtvelgeren vil oppdage enhver attributtverdi med nøkkelordet “AR” og bruke ovennevnte stilregler på det elementet.

Produksjon

[Attributtet*= “verdi”] -velgeren fungerer som den skal.

Konklusjon

Du kan style HTML -elementer som har visse attributter eller attributtverdier. Det er totalt syv CSS -attributt -velgere som er: [Attributt] Valg, [Attributt = “Verdi”], [Attributt ~ = “Value”] Selector, [Attribute | = “Value”] Selector, [Attribute ^= “ Verdi ”] Valg, [Attributt $ =“ Verdi] Valg, og [Attributt *= “Verdi”] Valg. Disse velgerne tjener et annet formål som vi har diskutert i detalj i dette innlegget sammen med relevante eksempler.