Descrierea selectori css și analiza cele mai de bază dintre ele

selectoare CSS - una dintre principalele caracteristici ale limbajului CSS. Selectoare permit să se aplice ca un grup de elemente, și numai unul dintre ei.

Selectoare în CSS

Selectoarele au nevoie pentru a spune browser-ului cum să folosească elemente de stiluri care sunt descrise in paranteze.

În acest caz, selectorul efectuează p - punctul tag. O astfel de regulă se va adăuga stil la toate punctele de pe o pagină web.

Ce sunt selectoare css?

Selector de Tag - cel mai ușor. El a fost prezentat în exemplul. Pentru a-l scrie în css, aveți nevoie pentru a scrie o etichetă de nume fără paranteze unghiulare. Stiluri vor fi aplicate la toate elementele cu tag-ul.
tabel<> - stiluri pentru toate tabelele
Li<> - stiluri pentru toate articolele de pe listă
A<> - stiluri pentru toate link-urile

class - orice element poate fi legat la o pagină Web de clasă stil. Chiar și o singură literă. Apoi, în css-fișierul pe care se poate referi la acest element scriind propriile stiluri pentru el. Pentru a face acest lucru, a pus punct și scrie numele unei clase de stil după. exemple:
.despre<> - regulile se aplică tuturor elementelor care au clasa atribut = „despre“
.jos<> - regulile se aplică tuturor elementelor care au clasa atribut = „în jos“
.plutitor<> - regulile se aplică tuturor elementelor care au class = atributul „float“

După cum puteți vedea, punctul de alimentare principală. class poate lega la un numar nelimitat de articole. Elementul poate fi atribuit mai multe clase.

Identifier - un alt tip de selectori. Un identificator, puteți specifica doar un singur element. Ea nu poate avea doi identificatori ID-ul și atașat la acest element nu poate fi stabilită oriunde altundeva.

El a cerut acest lucru:

Aceasta este, de asemenea, ca o clasă, numai atributul id este folosit ca valoare pentru care se utilizează fiecare cuvânt.

Pentru a se referă la un element cu identificatorul prin css pentru a scrie o valoare id-ul și a pus grătarul în fața lui.

#first font-size: 22px
>

Am apelat la un paragraf cu id = prima. Stilul se va aplica numai pentru el. Paragrafele rămase de dimensiunea textului nu se va schimba.

pseudo

Despre pseudo-clasele I-am scris un articol separat. așa că nu văd nici un motiv să se repete.

combinarea selectoare

O altă regulă importantă să fie conștienți de. clase de stil Căutători pot fi scrise fără a le separa unul de altul. De exemplu:
.class1.class2 - alege acele elemente care au ambele clase.
.class1.class3.class8 - selecteaza elementele care sunt folosite ca stilul de trei clasă.

selectoare imbricate

În cazul în care selectorii separate unele de altele prin spații, acesta poate fi tras la elementul dorit pentru noi. exemple:
Tabelul TD - va selecta toate celulele care se află în tabele
Ul li a - selectează toate link-urile care se află în elementele de listă (o listă de articole, la rândul lor, sunt în sine liste)
.Class1 p - selecteaza toate punctele cu clasa atributul = „Class1“
.class2 p etalon - selectează toate etichetele. situată în liniuțele cu clasa class2.

Investiția și combinate astfel încât poate fi orice număr de ori. exemple:
#header .logo interval: prima literă<> - va selecta prima literă din logo-ul Span, care se află în capacul
.class1.class2: hover<> - determină stilul atunci când mouse-ul pentru elementele care au atât clasa de stil.

selectoare pentru copii

Dacă trebuie să setați stilul pentru elementele-mamă, care sunt direct filiale. este necesar să-l înregistreze:
Ul> li<> - selectează elementele din listă sunt puse în ea în mod direct și nu fac parte din alte etichete
P> a<> - va selecta doar acele referințe în paragrafe, care stabilesc în mod direct în ele, nu imbricat în alte tag-uri (care, la rândul său, a investit în punctele)
exemplu:

Dacă un astfel de P selector registru> a. dacă stilurile aplicate referința din exemplul de mai sus? Nu, pentru că este încă încorporat într-o altă etichetă, care nu este o filială directă.

selectoare din apropiere

Ultimul lucru pe care îl va lua în considerare astăzi. Dacă vă înregistrați în css ca aceasta:
.Class1 + .class4 <>. atunci selectorul selectează un element cu un atribut class = „CLASS4“. iar acest element trebuie să stea în codul HTML imediat în spatele elementului cu clasa Class1. Numai în acest mod va funcționa. Din nou, uita-te la un exemplu:

Funcționează selectorul de mai sus (.class1 + .class4 <> )? Nu, pentru că elementele nu stau una lângă alta. Intre ele este tag-ul img. Dar dacă o ștergeți, atunci acesta va funcționa.

Deci, suntem considerate cele mai de bază și selectorii cele mai simple. Cu siguranță aceste cunoștințe vor fi suficiente pentru a rezolva 95% din probleme. În următorul articol voi descrie unele dintre selectorii css mai specifice.

selectoare Prioritate css

Pentru a determina care stilurile sunt o prioritate, utilizați reguli simple:
Id-ul este selectorul de prioritate. Dacă elementul are o clasă de stil și ID-ul. și ambele sunt atribuite aceleași proprietăți cu valori diferite, atunci stilurile care sunt scrise pentru ID-ul se va face.

prioritate selectorul de clasă este mai mult decât selectorul de etichetă (p, tabel, ul). Pseudo-clasa are aceeași greutate ca și cea a unei clase simple. p: prima linie de prioritate față de .firstline. pentru că, în al doilea selector doar o clasă, iar în primul - selectorul de tag-ul + pseudo.

O altă regulă utilă - selectorul în mod specific, prioritățile sunt mai multe stiluri pentru el. De exemplu, între corpul și p luptă câștigă paragraf, așa cum este selector mai specific decât corpul (deoarece este întreaga pagină, care nu este foarte specific). Tabelul p. la rândul său, mai precis decât p. În general, doar să fie conștienți de aceste reguli.