CSS-vælgere er brugt for at vælge det indhold, du vil style . Vælgere er en del af CSS-regelsættet. CSS-vælgere vælger HTML-elementer i henhold til dets id, klasse, type, attribut osv.
Der er flere forskellige typer vælgere i CSS.
- CSS-elementvælger
- CSS-id-vælger
- CSS-klassevælger
- CSS Universal Selector
- CSS gruppevælger
1) CSS-elementvælger
Elementvælgeren vælger HTML-elementet efter navn.
p{ text-align: center; color: blue; } <p>This style will be applied on every paragraph.</p> <p id="para1">Me too!</p> <p>And me!</p> Test det nu Produktion:
Denne stil vil blive anvendt på hvert afsnit.
Også mig!
Og mig!
2) CSS-id-vælger
Id-vælgeren vælger id-attributten for et HTML-element for at vælge et specifikt element. Et id er altid unikt på siden, så det er valgt at vælge et enkelt, unikt element.
Det skrives med hash-tegnet (#), efterfulgt af elementets id.
Lad os tage et eksempel med id'et 'para1'.
#para1 { text-align: center; color: blue; } <p id="para1">Hello Javatpoint.com</p> <p>This paragraph will not be affected.</p> Test det nu Produktion:
Hej Javatpoint.com
Dette afsnit vil ikke blive berørt.
3) CSS-klassevælger
Klassevælgeren vælger HTML-elementer med en specifik klasseattribut. Det bruges med et punktum. (punktsymbol) efterfulgt af klassenavnet.
Bemærk: Et klassenavn bør ikke startes med et tal.
Lad os tage et eksempel med et klasse 'center'.
.center { text-align: center; color: blue; } <h2>Hello Javatpoint.com (In smaller font)</h2> <p>This is a paragraph.</p> Test det nu Produktion:
Hej Javatpoint.com
Hej Javatpoint.com (i mindre skrifttype)
Dette er et afsnit.