Introduktion til typer af CSS-vælgere
Typer CSS-vælgere bruges til at vælge det indhold, vi vil style. Det hjælper med at vælge elementer baseret på deres klasse, id, type osv. En CSS-vælger er en komponent i CSS-regelsættet.
Typer af CSS-vælgere
Der er 5 sorter CSS-vælgere tilgængelige for os. Vi ser på følgende vigtige CSS-vælgere:
- CSS Universal Selector.
- CSS Element Selector.
- CSS-id-valg.
- CSS Class Selector.
- CSS-attributvælger.
1. CSS Universal Selector
På en HTML-side afhænger indholdet af HTML-tags. Et par tags definerer et specifikt websideelement. Den universelle CSS-vælger vælger alle elementerne på en webside.
Eksempel:
* (
color: blue;
font-size: 21px;
)
Disse to kodelinjer omgivet af de krøllede seler påvirker alle de elementer, der findes på HTML-siden. Vi erklærer en universalvælger ved hjælp af en stjerne i begyndelsen af den krøllede stag. Universal Selector kan bruges sammen med de andre vælgere i kombination.
2. CSS Element Selector
CSS Element Selector er også kendt som en Type selector. Element Selector i CSS forsøger at matche HTML-elementerne med samme navn. Derfor er en vælger af
- matcher alle
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- CSS-interviewspørgsmål
- SASS vs SCSS
- SASS Interview Spørgsmål
- Eksempler på HTML-bestilt liste
- elementer, dvs. alle de ikke-sorterede lister på den HTML-side.
Lad os se på et eksempel til elementvælgeren.
ul (
border: solid 1px #ccc;
)
For at forstå dette bedre, lad os se på et eksempel på HTML-kode for at anvende den CSS-kode, som vi har skrevet ovenfor.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Demotekst
I dette eksempel finder vi hovedsageligt tre elementer, nemlig
- element, mærket og et andet
- element. Da vores CSS-kode gælder for
- tag specifikt, ændringerne i grænsen udføres kun for vores
- tags, og ikke for tags. Normalt gælder disse ændringer ikke for indholdet af
- tags også, men i nogle scenarier kan stilarterne finde anvendelse på de indre elementer.
3. CSS ID-valg
CSS ID-valg hjælper udvikleren med at matche det ID, der er oprettet af udvikleren, til dets stylingindhold. ID Selector bruges ved hjælp af hash-tegnet (#) før ID-navnet erklæret af udvikleren. ID-vælger matcher alle HTML-elementer, der har en ID-attribut, med værdien den samme som værdien for vælgeren, uden hash-tegnet.
Her er et eksempel:
#box (
width: 90px;
margin: 10px;
)
Denne CSS-kode kan bruges til at matche det element, der har id 'boksen', som i den følgende sætning.
Her er tagget bare et eksempel. Vi kan skrive ID-attributten for ethvert HTML-tag. ID-vælgeren matcher ID-attributten i elementet og ser efter dens styling. I vores eksempel gælder stylingen, så længe ethvert element indeholder ID-attributten 'boks'.
Værdien af det id, der bruges, antages at være unikt. Hvis det samme ID bruges til to eller flere elementer, er koden teknisk ugyldig, men stylingen af elementet vil stadig gælde, og derfor undgås normalt at have det samme ID.
At skulle bruge et andet ID hver gang for hver HTML-side, er ret stift. Ud over at have problemer med stivhed står ID-vælgere i CSS også over for spørgsmålet om specificitet.
4. CSS Class Selector
CSS Class-vælgeren er en af de mest nyttige valg af alle vælgerne. Det erklæres ved hjælp af en prik efterfulgt af klassens navn. Dette klassens navn defineres af koderen, som det er tilfældet med ID-vælgeren. Klassevælgeren søger efter hvert element med en attributværdi med det samme navn som klassenavnet uden prikken.
Eksempel:
.square (
margin: 20px;
width: 20px;
)
Denne CSS-kode kan bruges til at matche det element, der har klassen 'firkant, som i den følgende sætning.
Denne stil gælder også for alle de andre HTML-elementer, der har en attributværdi for klassen som 'firkant'. Et element med samme klasseattributværdi hjælper os med at genbruge typografierne og undgår unødvendig gentagelse. Derudover er klassevælgeren fordelagtig, fordi det tillader os at tilføje flere klasser til et bestemt element. Vi kan tilføje mere end en klasse til attributten ved at adskille hver klasse med plads.
Eksempel:
Her er firkantet, fed og form tre forskellige typer klasser.
5. CSS-attributvælger
CSS-attributvælgeren stiler indhold i henhold til attributten og attributværdien nævnt i de firkantede parenteser. Der kan ikke være nogen mellemrum foran den åbne firkantede beslag.
input(type="text") (
background-color: #fff;
width: 100px;
)
Denne CSS-kode vil være et match til følgende HTML-element.
På samme måde, hvis værdien af attributten 'type' ændres, vil attributvælgeren ikke matche den. For eksempel matcher vælgeren ikke attributten, hvis værdien af 'type' ændrede sig fra 'tekst' til 'indsende'. Hvis attributvælgeren kun deklareres med attributten og ingen attributværdi, passer den til alle HTML-elementerne med attributten 'type', uanset om værdien er 'tekst' eller 'indsende'.
Eksempel:
input(type) (
background-color: #fff;
width: 100px;
)
Vi kan også gøre brug af attributvælgere uden nogen specifikation af en værdi uden for de firkantede parenteser. Dette vil hjælpe os med kun at målrette attributten, uanset elementet. I vores eksempel vil det målrette ud fra attributten 'type', uanset elementet 'input'. CSS-vælgere hjælper os med at forenkle vores kode og sætter os i stand til at bruge og genbruge den samme CSS-kode til forskellige HTML-elementer. De hjælper os med at style specifikke segmenter og dele af vores webside. De giver os mulighed for ensartet styling af lignende elementer på vores webside. CSS-vælgere er således en vigtig del af læringskurven for CSS.
Anbefalede artikler
Dette har været en guide til Typer af CSS-vælgere. Her har vi diskuteret de forskellige typer CSS-vælgere med eksempel. Du kan også gennemgå vores andre foreslåede artikler for at lære mere -