CSS Wildcard Selector
Wildcard Selectors
- De [attributt*= “Verdi”] er en wildcard -velger som brukes til å finne elementer hvis attributtverdi inkluderer strengen som vi har gitt her som verdien.
- De [attributt = ”verdi”] er en wildcard -velger som brukes til å finne elementer hvis attributtverdi starter med strengen som vi har gitt her som verdien.
- De [attributt $ = ”verdi”] Valg er en jokertegn som brukes til å finne elementer hvis attributtverdi ender med strengen som vi har gitt her som verdien.
Eksempel 1
Vi starter koden vår og utfører disse kodene i Visual Studio Code. Først åpner vi en ny fil. Deretter velger vi HTML som språk og legger deretter “!”Og trykk“ Enter ”. Alle HTML -grunnleggende tagger vises her. Så vi trenger ikke å legge til alle disse taggene manuelt. Vi legger bare "lenke" -merket i "hodet" som vi legger navnet på CSS -filen. Inne i kroppen legger vi en overskrift og noen DIV -containere, og noen avsnitt. Alle DIV -er og avsnitt inneholder forskjellige klassenavn, slik at vi bruker disse navnene som verdien i jokertegnutvelgeren for å velge elementene i CSS. Deretter vil vi bruke forskjellig styling på de valgte elementene.
Vi setter syntaksen til jokertegnsvelgeren [klasse * = “STR”] som vil velge alle elementene hvis klassenavn inneholder “STR”. Vi passerer "STR" som verdien av denne jokertegnutvelgeren. Vi kommer til å bruke noen egenskaper, slik at du enkelt vil merke hvordan den velger elementene og bruker stilen for dem alle. Vi setter "svart" som "bakgrunn" for alle elementene som inneholder "STR" i klassenavnene deres.
Vi setter teksten "farge" til "hvit" fordi vi har brukt svart til bakgrunnen. Vi endrer også størrelsen på teksten ved å bruke egenskapen "Font-size" og sette den til "18px". Vi justerer også teksten til de utvalgte elementene til "senteret" som bruker "font-family" -egenskapen og setter den til "Arial" -font. Vekten til skrifttypen til de valgte elementene er satt til “Fet”. Vi gir også utdataene fra koder i denne opplæringen. Se utgangen og sjekk hvordan den velger elementer og bruker alle disse egenskapene på de valgte elementene.
Utgangen viser at den velger alle elementene hvis klassenavn inneholder "STR" og egenskapene vi har brukt i CSS -koden, er alle brukt på de valgte elementene.
Eksempel 2
Vi har igjen flere DIV -klasser og flere avsnitt med forskjellige klassenavn og en overskrift i starten. Vi vil bruke Wildcard Selector i CSS og vil velge elementene fra denne HTML -filen og vil endre stilen til de valgte elementene.
Vi bruker den andre syntaksen til jokertegnene i dette eksemplet som er [klasse $ = “str”]. Den vil velge alle de elementene hvis klassenavn slutter med "Str" -strengen. Vi bruker også de gitte stylingegenskapene som vi bruker på de valgte elementene. Vi pynter den valgte teksten ved hjelp av egenskapen "tekstdekorat" og legger "understreker" for denne egenskapen. Vi har endret "fargen" på teksten til "maroon". Vi bruker også egenskapen "Font-size" og plasserer "22px" som verdi for å endre tekstens størrelse. Vi bruker også "Font-Family" -attributtet for å sette skrift.”
Her kan du se alle de klassene hvis navn slutter med "Str" -strengen er valgt og endret. Alle egenskapene som vi har beskrevet i CSS, brukes her på de elementene hvis klassenavn slutter på “Str”. Dette er alt på grunn av bruken av jokertegnsvelgeren.
Eksempel 3
Denne HTML -filen er den samme som ovenfor. Vi endrer bare navnene på klassene til div og avsnitt. Vi bruker den tredje syntaksen til Wildcard Selector i CSS for denne koden.
I dette eksemplet skal vi bruke den tredje syntaksen til jokertegn som er [klasse^= “str”], og det vil velge alle elementene hvis klassenavn starter med strengen “Str”. For alle elementer med "STR" i starten av klassenavnene, setter vi "rosa" som "bakgrunn". Vi har endret "fargen" på teksten til "rød". Vi bruker egenskapen "Font-size" og spesifiserer den til "22px" for å endre tekstens størrelse. Vi bruker også "font-family" -attributtet for å definere typen font til "calibri" og skifte teksten til de valgte elementene til "senteret". Font-stilen til de spesifikke elementene er her satt til "kursiv".
I dette skjermbildet er alle disse elementene stylet hvis klassenavn starter med "STR" -strengen. Wildcard -velgeren velger alle disse elementene og bruker alle egenskaper for dem. Du kan også se dette i utdataene.
Eksempel 4
Vi kommer til å endre den forrige HTML -koden litt. Vi legger til flere DIV -containere og legger til flere avsnitt i den forrige HTML -filen og vil bruke alle tre Wildcard -velgerne i CSS -koden til dette eksemplet.
I denne koden bruker vi først litt styling på overskriften og endrer "font-family" til "Algerie". Vi setter også overskriften i "senteret" ved å bruke egenskapen "tekst-align". Egenskapen "tekst-dekorasjon" er her vi har avgjort som "understrek", så den vil trekke understreken for overskriften. "Fargen" for dette er satt som "maroon".
Deretter bruker vi Wildcard -velgeren der vi plasserte “*” og “STR” som verdien. Så den vil velge alle klasser som inneholder "STR" i klassenavnet. Vi bruker også noen egenskaper som vil gjelde for de valgte elementene. Etter å ha satt stilegenskapene for denne jokertegnutvelgeren, beveger vi oss mot neste jokertegn som er "[klasse^=" par "]" vil den velge alle elementer der klassenavnene starter med strengen "par" og vil bruke Disse gitte egenskapene på disse elementene.
Nå bruker vi den siste wildcard -velgeren her som vi skriver som "[klasse $ =" div "]". Så det vil velge de elementene hvis klassenavn ender på "Div" -strengen og også bruke de gitte egenskapene på dem alle. Alle disse jokertegnene ignorerer elementene som ikke oppfyller tilstanden til disse jokertegnene.
Se på denne utgangen, de elementene som inneholder "STR" i klassenavnene er stylet de samme, de elementene hvis klassenavn starter med "PAR" er stylet på samme Klassenavnet er det samme. Og de elementene som ikke inneholder “Str” i klassenavnet, og at klassenavnene deres ikke starter med “PAR” og ikke slutter på “Div” -strengen er ikke valgt og vises enkel her. Ingen eiendommer blir brukt på dem.
Konklusjon
Målet med å skrive denne opplæringen er å veilede deg om CSS Wildcard Selectors. Vi har utforsket CSS -jokertegnene og har forklart deg hva Wildcard Selectors er, hvordan du bruker disse jokertegnene og hvordan de fungerer. Vi har diskutert at Wildcard Selectors brukes til å plukke flere elementer samtidig og brukes til å bruke stylingegenskaper på de elementene som vi har valgt ved hjelp av disse jokertegnene. Vi har også vist eksempler der vi har brukt de jokertegnene og har gitt utgangene fra alle eksempler i denne opplæringen.