Ghidul definitiv pentru pseudo-clasele CSS
Fie că sunteți un novice sau un dezvoltator CSS cu experiență, probabil că ați auzit de pseudo-clase. Cea mai cunoscută pseudo-clasă este probabil :planare, care ne permite să modelam un element atunci când este în starea de hover, adică atunci când un dispozitiv de indicatori, cum ar fi un șoarece, este îndreptat spre el.
Urmând conceptul postărilor anterioare pe margine: plutitoarele auto și CSS, vom examina mai aprofundat pseudo-clasele din acest post. Vom vedea ce pseudo-clase sunt într-adevăr, cum funcționează, cum putem să le clasificăm și cum sunt diferite de pseudoelemente.
Ce sunt pseudo-clasele??
O pseudo-clasă este un cuvânt cheie pe care îl putem adăuga la selectorii CSS pentru a defineste o stare speciala a elementului HTML care aparține. Putem adăuga o pseudo-clasă la un selector CSS folosind colon sintaxă : asa: a: hover ...
O clasă CSS este un atribut pe care îl putem adăuga elementelor HTML pe care dorim să le aplicăm aceleași reguli de stil, cum ar fi elementele de meniu de top sau titlurile widget-urilor din bara laterală. Cu alte cuvinte, putem folosi clase CSS grupați sau clasificați elementele HTML care sunt similare într-un fel sau altul.
Pseudo-clasele sunt similare cu ele în sensul că sunt și ele folosit pentru a adăuga reguli de stil elementelor care au aceeași caracteristică.
Dar, în timp ce există clase autentice definite de utilizator și pot fi văzute în codul sursă, de exemplu locul de muncă al clasei CSS regulate este de a clasifica sau grupa elemente. Dezvoltatorii știu cum trebuie grupați elementele lor: ele pot forma clase precum "meniu-elemente", "butoane", "miniaturi" etc., pentru a grupa și pentru a forma mai târziu elementele similare. Aceste clasificări se bazează pe caracteristicile elementelor care sunt dat de dezvoltatorii înșiși. De exemplu, dacă un dezvoltator decide să utilizeze a Elementele HTML însă au propriile caracteristici comune pe baza stării, poziției, naturii și interacțiunii cu pagina și cu utilizatorul. Acestea sunt caracteristicile care sunt nu marcate în mod obișnuit în codul HTML, dar noi putem vizați-le cu pseudo-clase în CSS, de exemplu: Acestea sunt acele tipuri de caracteristici care sunt în general vizate de pseudo-clase. Pentru a înțelege mai bine diferența dintre clase și pseudo-clase, să presupunem că folosim clasa Putem modela aceste elemente ale ultimului copil cu următoarele CSS: Dar ce se întâmplă când se schimbă ultimul element? Ei bine, va trebui să ne mișcăm Acest hassle de actualizarea claselor poate fi lăsată de agentul utilizatorului, cel puțin pentru acele caracteristici care sunt comune printre elementele (și fiind un ultim element este la fel de comun cum poate obține). Având o pre-definită Există multe tipuri de pseudo-clase, toate oferindu-ne modalități de a direcționa elemente pe baza caracteristicilor lor care sunt altfel inaccesibile sau mai dificil de accesat. Iată o listă de pseudo-clase standard în MDN. Pseudo-clasele dinamice sunt adăugate și eliminate din elementele HTML dinamic, bazate pe starea în care se află tranziția ca răspuns la interacțiunile utilizatorului. Unele dintre exemplele de pseudo-clase dinamice sunt Pseudo-clasele bazate pe stat se adaugă elementelor atunci când sunt într-o stare statică particulară. Unele dintre cele mai cunoscute exemple sunt: Cea mai populară pseudo-clasă pe bază de stat trebuie să fie Pseudo-clasele structurale clasifică elementele cu privire la poziția lor în structura documentului. Cele mai frecvente exemple sunt Există, de asemenea, diverse pseudo-clase greu de clasificat, cum ar fi: Unul dintre cele mai grele lucruri despre pseudo-clase este probabil să înțeleagă diferența dintre Ambele sunt pseudo-clase structurale, și marca un element specific în interiorul unui element parent (container), dar într-un mod diferit. presupune n este de 2, atunci Să aruncăm o privire la un exemplu. Să vedem cum acest stil CSS scurt HTML în două cazuri diferite. În cazul 1, al doilea element din interiorul a Dar dacă elementul părinte face aveți un al doilea paragraf, În exemplul nostru, Paragraful 1, Copilul 1 Paragraful 2, Copilul 3 În cel de-al doilea caz, mutăm lista neordonată în al treilea loc, iar al doilea paragraf va apărea înaintea ei. Aceasta înseamnă că atât Paragraful 1, Copilul 1 Paragraful 2, Copilul 2 Dacă doriți să citiți mai multe despre diferențele dintre Când vorbim despre pseudo-clase, este important să înțelegem cum diferă de pseudoelemente, pentru a nu le amesteca. Dar în timp ce folosim pseudo-clase pentru a selecta elementele HTML există în arborele de documente doar nu marcate separat, pseudo-elementele ne permit să vizeze elemente care nu există în mod normal în DOM, fie la toate (de ex Există și a diferență în sintaxă. Pseudo-elementele sunt în general identificate cu dublu-colonii Acest lucru poate duce la un caz de confuzie ca și în CSS2, pseudo-elementele au fost marcate cu un singur colon, de asemenea - browserele încă acceptă singura sintaxă de colon pentru pseudo-elemente. Există, de asemenea, diferențe între pseudo-clase și pseudo-elementele din modul în care le putem viza cu CSS. Pseudoelementele pot apărea numai după secvența selectorilor, în timp ce pseudo-clasele pot fi plasate oriunde în secvența de selecție CSS. De exemplu, puteți viza ultimul element dintr-un element de listă, cum ar fi SAU Prima secvență a selectorului selectează ultimul copil din interiorul lui Să încercăm să facem ceva similar cu pseudoelementele. Codul CSS de mai sus este valabil, iar textul "roșu" va apărea după Acest cod, pe de altă parte, nu va funcționa, așa cum noi nu poate schimba poziția unui pseudo-element în secvența selectorului. De asemenea, un singur pseudo-element poate apărea lângă un selector, în timp ce pseudo-clase pot fi combinate unul cu altul dacă combinația are sens. De exemplu, pentru a direcționa elemente primului copil care sunt și ele numai pentru citire, putem crea o combinație de pseudo-clase Un cod selector cu a Este important să știți asta acestea sunt nu CSS pseudo-clase care sunt vizate de jQuery. Ele sunt numite extensii jQuery selector. Extensiile jQuery selector vă permit țintă elementele HTML cu cuvinte cheie mai simple. Cele mai multe dintre acestea sunt combinații de selectori CSS normali multipli, care sunt reprezentați cu un singur cuvânt cheie.Scopul pseudo-claselor
.ultimul pentru a identifica ultimele elemente din containerele părinte diferite.
li.last text-transform: majuscule; option.last font-style: italic;
.ultimul clasa de la ultimul element până la cel actual.:ultimul copil pseudo-clasă este foarte util într-adevăr. În acest fel, noi nu trebuie să indicați ultimul element în codul HTML, dar putem încă să le formăm cu următorul CSS: li: ultimul copil text-transform: majusculă; opțiune: last-child font-style: italic;
Tipurile principale de pseudo-clase
1. Pseudo-clase dinamice
:planare, : focus, :legătură, și :vizitat, toate acestea putând fi adăugate la ancora etichetă. a: vizitat culoare: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Pseudo-clase bazate pe stat
: verificat care pot fi aplicate pentru casetele de selectare ():ecran complet pentru a viza orice element care este în prezent afișat în modul ecran complet: dezactivat pentru elementele HTML care pot fi în modul dezactivat, cum ar fi , , și . : verificat, care indică dacă este bifată o casetă de selectare sau nu. .caseta de selectare: bifată + etichetă font-style: italic; input: disabled background-color: #EEEEEE;
3. Pseudo-clase structurale
:primul copil, :ultimul copil, și : Nth-child (n) - toate pot fi folosite pentru a viza un anumit element copil în interiorul unui container în funcție de poziția sa - și :rădăcină care vizează cel mai înalt element parental din DOM. 4. Diverse pseudo-clase
: Nu (x) care selectează elemente care nu se potrivesc cu selectorul x: Lang (language-code) care selectează elemente ale căror conținut se află într-o anumită limbă: Dir (direcționalitate) care selectează elemente cu conținut de direcționalitate dat (de la stânga la dreapta sau de la dreapta la stânga). p: lang (ko) culoarea fundalului: # FFFF00; : rădăcină background-color: # FAEBD7;
nth-copil vs nth de tip Pseudo-clase
: Nth-copil și : Nth-de-tip pseudo-clase.: Nth-de-copil (n) vizează un element care este al doilea copil al elementului său parental, și : Nth-de-tip (n) obiective al doilea dintre acestea acelasi tip de element (cum ar fi paragrafele) în interiorul unui element părinte. / * un paragraf care este, de asemenea, al doilea copil în interiorul elementului său părinte * / p: nth-child (2) culoare: # 1E90FF; // lightblue / * al doilea paragraf din interiorul unui element părinte * / p: nth-of-type (2) font-weight: bold;
Cazul 1
nth-copil (2) regula nu se va aplica. Deși este al doilea copil, este nu un paragraf. nth-de-tip (2) se va aplica regula, deoarece această regulă caută doar elemente, și nu le pasă de altele tipuri de elemente (cum ar fi liste neordonate) în interiorul elementului părinte.nth-de-tip (2) regula va schita al doilea paragraf care este Child 3.
Lista neordonată 1, copilul 2
Cazul 2
: Nth-copil (2) si : Nth-de-tip (2) vor fi aplicate reguli, deoarece al doilea paragraf este și al doilea copil al părintelui său
Lista neordonată 1, Copilul 3
: Nth-de-copil și : Nth-de-tip pseudo-clase, CSS Tricks are un post minunat pe el. Dacă utilizați SASS, Family.scss vă poate ajuta să creați complicate nth-copilelemente confiate.Pseudo-clase vs Pseudo-Elemente
pseudo-elementele, precum ::inainte de și ::după (vedeți acest tutorial cu privire la modul de utilizare a acestora) adăugate de agenții utilizator, și acestea pot fi direcționate și decorate cu CSS precum și pseudo-clase. ::inainte de și ::după) sau numai ca anumite părți ale elementelor existente (de ex ::prima literă sau :: substituent). ::, în timp ce pseudo-clasele sunt identificate cu un singur colon :.1. Locul lor în secvența de selecție CSS
ul>: last-child.red culoare: # B0171F;
ul> .red: ultimul copil culoare: # B0171F;
.roșu) iar al doilea selectează ultimul copil printre elementele care posedă .roșu clasă înăuntru ul> .red :: după display: block; conținut: "roșu"; culoare: # B0171F;
articole cu clasa .roșu. ul> :: după.red afișare: bloc; conținut: "roșu"; culoare: # B0171F;
2. Numărul de apariții într-o secvență de selecție
:primul copil și : Read-only în modul următor: : primul copil: numai pentru citire color: #EEEEEE;
jQuery Selector Extensions
: sintaxa nu constituie întotdeauna o pseudo-clasă CSS corespunzătoare. Dacă ați folosit vreodată jQuery, atunci s-ar fi putut folosi mai multe selectori : sintaxa, de exemplu $ ( ': Caseta de selectare'), $ ( ': Intrare') și $ ( ': Selectat'). / * Modificați fontul tuturor elementelor HTML legate de intrare, cum ar fi butonul, selectați și introduceți * / $ (": input") .css ("font-family", "courier new")
