Introducere în Tipuri de selectori CSS
Tipurile de selectoare CSS sunt utilizate pentru a alege conținutul pe care dorim să îl stilăm. Ajută la selectarea elementelor în funcție de clasa, id-ul, tipul lor etc. Un selector CSS este o componentă a Regulilor CSS
Tipuri de selectori CSS
Există 5 varietăți de selectoare CSS disponibile pentru noi. Vom analiza următorii selectori CSS importanți:
- Selector universal CSS
- Selector de elemente CSS
- CSS Id Selector.
- Selectorul clasei CSS
- Selector de atribute CSS
1. CSS Universal Selector
Într-o pagină HTML, conținutul depinde de etichetele HTML. O pereche de etichete definește un anumit element al paginii web. Selectorul universal CSS selectează toate elementele de pe o pagină web.
Exemplu:
* (
color: blue;
font-size: 21px;
)
Aceste două linii de cod înconjurate de bretelele cret vor afecta toate elementele prezente pe pagina HTML. Declarăm un selector universal cu ajutorul unui asterisc la începutul bretelei cretate. Selectorul universal poate fi utilizat împreună cu ceilalți selectori în combinație.
2. Selector de elemente CSS
CSS Element Selector este, de asemenea, cunoscut ca un Selector de tip. Selectorul de elemente din CSS încearcă să corespundă elementelor HTML cu același nume. Prin urmare, un selector de
- se potrivește cu toate
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- Cheatsheet CSS3
- Întrebări de interviu CSS
- SASS vs SCSS
- Întrebări de interviu SASS
- Exemple de liste HTML comandate
- elemente adică toate listele neordonate din pagina HTML.
Să ne uităm la un exemplu pentru selectorul de elemente.
ul (
border: solid 1px #ccc;
)
Pentru a înțelege mai bine acest lucru, să ne uităm la un exemplu de cod HTML pentru a aplica codul CSS pe care l-am scris mai sus.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Text demonstrativ
În acest exemplu, vom găsi în principal trei elemente și anume
- element, eticheta și alta
- element. Întrucât codul nostru CSS se aplică la
- în mod specific, modificările în graniță se vor face numai pentru țara noastră
- etichete, și nu pentru etichete. De obicei, aceste modificări nu se aplică conținutului
- De asemenea, etichete, dar în unele scenarii, stilurile se pot aplica elementelor interioare.
3. Selector ID CSS
Selectorul CSS îl ajută pe dezvoltator să corespundă ID-ului creat de dezvoltator la conținutul său de styling. ID Selector este utilizat cu ajutorul semnului hash (#) înainte de numele ID declarat de dezvoltator. Selectorul ID se potrivește cu fiecare element HTML care are un atribut ID cu valoarea identică cu cea a selectorului, fără semnul hash.
Iată un exemplu:
#box (
width: 90px;
margin: 10px;
)
Acest cod CSS poate fi utilizat pentru a se potrivi cu elementul care are id-ul „caseta”, ca în propoziția următoare.
Aici, eticheta este doar un exemplu. Putem scrie atributul ID pentru orice etichetă HTML. Selectorul ID se potrivește cu atributul ID din element și caută stilul său. În exemplul nostru, stilul se aplică atât timp cât orice element conține atributul ID „casetă”.
Se presupune că valoarea ID-ului folosit este unică. Dacă se folosește același ID pentru două sau mai multe elemente, codul este invalid din punct de vedere tehnic, dar stilul elementului se va aplica în continuare, deci de a avea același ID este de obicei evitat.
Trebuie să folosești un ID diferit de fiecare dată pentru fiecare pagină HTML, este destul de rigid. Pe lângă faptul că se confruntă cu probleme de rigiditate, selectorii de identificare din CSS se confruntă și cu problema specificității.
4. Selectorul clasei CSS
Selectorul Clasa CSS este unul dintre cei mai utili selectori ai tuturor selectorilor. Este declarat folosind un punct urmat de numele clasei. Acest nume de clasă este definit de codificator, cum este cazul selectorului ID. Selectorul de clase caută fiecare element care are o valoare de atribut cu același nume cu numele clasei, fără punct.
Exemplu:
.square (
margin: 20px;
width: 20px;
)
Acest cod CSS poate fi utilizat pentru a se potrivi cu elementul care are clasa pătrată, ca în propoziția următoare.
Acest stil se aplică și tuturor celorlalte elemente HTML care au o valoare de atribut pentru clasa drept „pătrat”. Un element care are aceeași valoare de atribut de clasă ne ajută în reutilizarea stilurilor și evită repetarea inutilă. În plus, Selectorul de clase este benefic, deoarece ne permite să adăugăm mai multe clase la un anumit element. Putem adăuga mai multe clase la atribut prin separarea fiecărei clase cu spațiul.
Exemplu:
Aici pătrat, îndrăzneț și formă sunt trei tipuri diferite de clase.
5. Selector de atribute CSS
Selectorul de atribute CSS stilează conținutul în funcție de atribut și valoarea atributului menționate în parantezele pătrate. În fața suportului pătrat de deschidere nu pot fi prezente spații.
input(type="text") (
background-color: #fff;
width: 100px;
)
Acest cod CSS ar fi potrivit pentru următorul element HTML.
În mod similar, dacă valoarea „tipului” atributului se schimbă, selectorul Atribut nu s-ar potrivi cu acesta. De exemplu, selectorul nu ar corespunde atributului dacă valoarea „tipului” s-ar schimba de la „text” la „trimite”. Dacă selectorul de atribute este declarat doar cu atributul și nici o valoare a atributului, atunci acesta se va potrivi cu toate elementele HTML cu atributul „tip”, indiferent dacă valoarea este „text” sau „trimite”.
Exemplu:
input(type) (
background-color: #fff;
width: 100px;
)
Putem folosi, de asemenea, selectori de atribute, fără specificarea unei valori în afara parantezelor pătrate. Acest lucru ne va ajuta să vizăm doar atributul, indiferent de element. În exemplul nostru, se va viza pe baza atributului „tip”, indiferent de elementul „intrare”. Selectorii CSS ne ajută să simplificăm codul nostru și ne permit să utilizăm și să reutilizăm același cod CSS pentru diverse elemente HTML. Ele ne ajută în stilarea unor segmente și porțiuni specifice ale paginii noastre web. Ele ne oferă opțiunea de a modela în mod uniform elemente similare în pagina noastră web. Selectorii CSS sunt astfel o parte importantă a curbei de învățare a CSS.
Articole recomandate
Acesta a fost un ghid pentru Tipuri de selectori CSS. Aici am discutat despre diferite tipuri de selectori CSS, de exemplu. Puteți parcurge și alte articole sugerate pentru a afla mai multe -