Introduktion till typer av CSS-väljare
Typer av CSS-väljare används för att välja innehåll som vi vill utforma. Det hjälper till att välja element baserat på deras klass, id, typ osv. En CSS-väljare är en del av CSS-regeluppsättningen.
Typer av CSS-väljare
Det finns fem olika CSS-väljare tillgängliga för oss. Vi kommer att titta på följande viktiga CSS-väljare:
- CSS Universal Selector.
- CSS-elementväljare.
- CSS-idväljare.
- CSS-klassväljare.
- CSS-attributväljare.
1. CSS Universal Selector
På en HTML-sida beror innehållet på HTML-taggar. Ett par taggar definierar ett specifikt webbsideelement. Den universella CSS-väljaren väljer alla element på en webbsida.
Exempel:
* (
color: blue;
font-size: 21px;
)
Dessa två kodrader omgiven av de lockiga hängslen kommer att påverka alla element som finns på HTML-sidan. Vi förklarar en universalväljare med hjälp av en asterisk i början av den lockiga stag. Universal Selector kan användas tillsammans med de andra väljarna i kombination.
2. CSS-elementväljare
CSS Element Selector är också känd som en typväljare. Elementväljare i CSS försöker matcha HTML-elementen med samma namn. Därför en väljare av
- matchar alla
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- CSS-intervjufrågor
- SASS vs SCSS
- SASS intervjufrågor
- Exempel på HTML-beställd lista
- element dvs alla oordnade listor på den HTML-sidan.
Låt oss titta på ett exempel för elementväljaren.
ul (
border: solid 1px #ccc;
)
För att förstå detta bättre, låt oss titta på ett exempel på HTML-kod för att tillämpa den CSS-kod som vi har skrivit ovan.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Demotekst
I det här exemplet hittar vi huvudsakligen tre element, nämligen
- element, taggen och en annan
- element. Eftersom vår CSS-kod gäller för
- märker specifikt kommer ändringarna i gränsen endast att göras för vår
- och inte för taggarna. Vanligtvis gäller dessa ändringar inte innehållet i
- taggar också, men i vissa scenarier kan stilarna gälla för de inre elementen.
3. CSS ID-väljare
CSS ID-väljare hjälper utvecklaren att matcha det ID som skapats av utvecklaren till dess stylinginnehåll. ID Selector används med hjälp av hash (#) -tecknet innan det ID-namn som deklareras av utvecklaren. ID-väljare matchar varje HTML-element som har ett ID-attribut med värdet som är detsamma som för väljaren, utan hash-tecken.
Här är ett exempel:
#box (
width: 90px;
margin: 10px;
)
Denna CSS-kod kan användas för att matcha elementet med ID-rutan, som i följande mening.
Här är taggen bara ett exempel. Vi kan skriva ID-attributet för alla HTML-taggar. ID-väljaren matchar ID-attributet i elementet och letar efter dess styling. I vårt exempel gäller stylingen så länge som något element innehåller ID-attributet "rutan".
Värdet på det ID som används ska vara unikt. Om samma ID används för två eller flera element är koden tekniskt ogiltig, men elementets styling kommer fortfarande att gälla, och därför har samma ID vanligtvis att undvikas.
Att behöva använda ett annat ID varje gång för varje HTML-sida är ganska styvt. Förutom problem med styvhet står ID-väljare i CSS inför frågan om specificitet.
4. CSS-klassväljare
CSS-klassväljaren är en av de mest användbara väljarna för alla väljare. Det deklareras med en punkt följt av klassens namn. Detta klassnamn definieras av kodaren, som är fallet med ID-väljaren. Klassväljaren söker efter varje element som har ett attributvärde med samma namn som klassnamnet utan punkten.
Exempel:
.square (
margin: 20px;
width: 20px;
)
Denna CSS-kod kan användas för att matcha elementet med klassens kvadrat, som i följande mening.
Den här stilen gäller också alla andra HTML-element som har ett attributvärde för klassen som "kvadrat". Ett element med samma klassattributvärde hjälper oss att återanvända stilarna och undvika onödig upprepning. Dessutom är klassväljaren fördelaktigt eftersom det tillåter oss att lägga till flera klasser till ett visst element. Vi kan lägga till mer än en klass till attributet genom att separera varje klass med utrymme.
Exempel:
Här kvadratiska, djärva och form är tre olika typer av klasser.
5. CSS-attributväljare
CSS-attributväljaren utformar innehåll enligt attributet och attributvärdet som nämns i fyrkantiga parenteser. Inga utrymmen kan finnas före den öppna fyrkantiga konsolen.
input(type="text") (
background-color: #fff;
width: 100px;
)
Denna CSS-kod skulle vara en matchning för följande HTML-element.
På samma sätt, om värdet på attributet "typ" ändras, skulle attributväljaren inte matcha det. Till exempel skulle väljaren inte matcha attributet om värdet av 'typ' ändrades från 'text' till 'skicka'. Om attributväljaren deklareras med endast attributet och inget attributvärde, kommer det att matcha alla HTML-element med attributet 'typ', oavsett om värdet är 'text' eller 'skicka'.
Exempel:
input(type) (
background-color: #fff;
width: 100px;
)
Vi kan också använda attributväljare utan specifikation för ett värde utanför de fyrkantiga parenteserna. Detta hjälper oss att bara rikta in oss på attributet, oavsett element. I vårt exempel kommer det att rikta sig baserat på attributet 'typ', oavsett elementet 'input'. CSS-väljare hjälper oss att förenkla vår kod och gör det möjligt för oss att använda och återanvända samma CSS-kod för olika HTML-element. De hjälper oss att utforma specifika segment och delar av vår webbsida. De ger oss möjligheten att likformig utforma liknande element på vår webbsida. CSS-väljare är alltså en viktig del av inlärningskurvan för CSS.
Rekommenderade artiklar
Detta har varit en guide till typer av CSS-väljare. Här har vi diskuterat de olika typerna av CSS-väljare med exempel. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -