atâta timp cât rămâne în mijlocul elementului , vor fi întâlniri pentru totdeauna. În plus, orice element în spatele limitelor elementelor nu vor fi colectate.Mai jos sunt titlurile, rândurile 3 și 5.
Articolul h2 (...)
...
Acest titlu va fi discutat
Acest titlu va fi discutat
Selector direct pentru copii
Autocolantele selectoare trebuie să meargă atât de departe, alegând mai mult decât mi-aș dori. În unele cazuri, pot exista doar copii direcți ai elementului Patrie, dar nu o copie separată a elementului de investiție adânc în mijlocul strămoșului. Această opțiune poate avea un selector copil direct prin plasarea unui semn mai mare decât (>) între elementul părinte și elementul secundar al selectorului.
De exemplu, articolul > p este un selector direct de copil al unui singur element
Fii situat direct în mijlocul elementului . Oricare ar fi elementul<р>plasarea elementului de poză sau investiții în mijlocul unui alt element, , nu vor fi colectate.
Mai jos, paragraful de pe rândul 3, cu o margine dreaptă a tatălui tău , de aceea a fost ales.
Articolul > p (...)
Acest paragraf va fi șters
Selectori contestați
A ști cum să selectezi elementele copil este foarte dificil și tinde să se umple des. Cu toate acestea, elementele controversate, cum ar fi elementele care pot avea un strămoș viu, ar putea fi, de asemenea, nevoie să fie selectate. O astfel de selecție poate fi făcută folosind selectoare arbitrare suplimentare și selectoare secundare.
Selector de dispute Zagalny
Selectorul nativ original vă permite să selectați elemente care vor fi selectate pe baza elementelor lor native, cum ar fi cele care au același tată vechi. Mirosurile sunt create în spatele simbolului tildei (~) între cele două elemente din mijlocul selectorului. Primul element înseamnă că un alt element poate intra în conflict cu el, iar același tată este de vină pentru ambele.
Selector h2~p - acesta este un selector ascuns, caută elemente
Ce urmează după orice elemente
Acesta este tatăl lui. Elementul Shchob
Dacă vorbim, putem merge după orice element
.
Apar paragrafele din rândurile 5 și 9, fragmente de duhoare merg după titlul din arborele documentului și pot fi același tată care se află la antetul original.
H2 ~ p(...)
...
Acest paragraf va fi șters
Acest paragraf va fi șters
Selectori de țară
Uneori este posibil să aveți nevoie de puțin mai mult control, inclusiv abilitatea de a selecta un element complementar care urmează direct după alt element complementar. Selectorul secundar selectează doar elemente controversate care urmează direct unui alt element controversat. În locul simbolului tilde, așa cum este cazul selectorului complementar, selectorul complementar înlocuiește simbolul plus (+) între două elemente din selector. Din nou, primul element înseamnă că celălalt element este vinovat că îl urmărește direct pe următorul și este controversat, iar ambele elemente sunt vinovate de același tată.
Să aruncăm o privire la selectorul de judecători h2 + p. Vor fi colectate mai puține elemente
Cei care merg direct după elemente
. În ambele, poate exista și unul și același element al Tatălui.
Paragraful de pe rândul 5 este selectat deoarece urmează imediat titlul său original și au un element puternic al tatălui.
H2 + p(...)
...
Acest paragraf va fi șters
Exemplu de selectoare auxiliare
Introducere ( afișare: niciuna; ) etichetă, ul ( chenar: 1 px solid #cecfd5; chenar-radius: 6 px; ) etichetă ( culoare: #0087cc; cursor: indicator; afișare: bloc inline; dimensiune font: 18 px; umplutură: 5px 9px; tranziție: toate .15s ease; ) label:hover (culoare: #ff7b29; ); ) nav ( înălțime maximă: 0; depășire: ascuns; tranziție: toate .15 s ușurință; ) input: verificat ~ nav ( înălțime maximă: 500 px; ) ul ( stil listă: niciunul; marjă: 8 px 0 0 0; umplutură : 0; lățime: 100 px; ) li ( chenar-jos: 1px solid #cecfd5; ) li:last-child ( chenar-jos: 0; ) a ( culoare: #0087cc; text-decor: niciunul; ) a:hover (culoare: #ff7b29; )
Selectori de atribute
Aceste tipuri de selectoare pot fi definite și ca selectoare de atribute, în care un element este selectat pe baza unei clase sau a valorii id. Acești selectori de atribute de clasă și id sunt folosiți pe scară largă și apăsați mai tare, dar deloc. Alți selectori de atribute au apărut în Pe lângă stâncile rămase, zokrema, a creat o bandă grozavă în avans din CSS3. Elementele pot fi selectate acum în funcție de ce atribut este și ce valoare conține.
Selector de vizibilitate a atributelor
Primul selector de atribute selectează un element pe baza căruia se află atributul, indiferent de valoarea sa reală. Pentru a selecta un element pe baza atributului său, faceți clic pe numele atributului în brate patrate() la selector. Brațele pătrate pot veni după orice tip sau clasă de selector, în funcție de nivelul de specificitate cerut.
A (...)
Selector de atribute =
Pentru a identifica un element cu aceleași și precis specificate valori, puteți folosi același selector ca și înainte, de data aceasta în mijlocul brațelor pătrate după numele atributului, includeți casetele cu valori. În mijlocul brațelor pătrate se află numele atributului, care vine după semn, exact (=), iar în mijlocul picioarelor este scrisă valoarea atributului.
A (...)
Selector de atribute *=
Dacă dorim să găsim un element pe baza unei părți din valoarea atributului, mai degrabă decât pe o căutare exactă, putem folosi simbolul stea (*) în brațele pătrate ale selectorului. Steaua poate apărea imediat după numele atributului, chiar înainte de semnul de rang. Aceasta înseamnă că în acest moment valoarea poate apărea sau dispărea din atributul evaluat.
A (...)
Selector de atribute ^=
Pe lângă selectarea unui element în funcție de valoarea atributului care apare în text, puteți selecta și un element care se bazează pe cu ce începe valoarea atributului. Utilizarea unui simbol circumflex (^) în brațele pătrate ale selectorului dintre numele atributului și un semn egal înseamnă că valoarea atributului poate începe cu textul atribuit.
A (...)
...
Selector de atribute $=
Lângă selectorul frontal este selectorul de atribute, unde valorile se termină cu text. În loc de simbolul ^, există un semn dolar ($) la brațele pătrate ale selectorului între numele atributelor și semnul egal. Utilizarea semnului dolar înseamnă că valoarea atributului se poate termina cu textul specificat.
A (...)
Selector de atribute ~=
Unele valori ale atributelor pot fi separate prin trecerea unui tip la un moment dat, în care numai unul după altul este potrivit pentru a crea o selecție. În acest caz, simbolul tilde (~) din brațele selectorului pătrat între numele atributului și semnul egal indică valorile atributelor separate prin spații, în care un cuvânt corespunde exact valorii atribuite.
A (...)
Selector de atribute | =
Atunci când valorile atributelor sunt separate prin cratime și nu prin spații, simbolul liniei verticale (|) în brațele selectorului pătrat poate apărea între numele atributului și simbolul de egalitate. O linie verticală înseamnă că valorile atributului pot fi separate printr-o cratimă, iar cuvintele atribut încep cu valoarea atribuită.
A (...)
Aplicarea selectoarelor de atribute
Ul ( stil-listă: niciunul; margine: 0; umplutură: 0; ) a ( poziția fundalului: 0 50%; repetare fundal: fără repetare; culoare: #0087cc; padding-left: 22px; text-decor: nici unul; ) a:hover (culoare: #ff7b29; ) a ( imagine de fundal: url("images/pdf.png"); ) a ( imagine de fundal: url("images/doc.png"); ) a ( imagine de fundal: url("imagini/imagine.png"); ) a ( imagine de fundal: url ("imagini/audio.png"); ) a ( imagine de fundal: url("imagine/video.png" );
O privire asupra selectoarelor de atribute fundul Nume Descriere
A Selector de vizibilitate a atributelor Selectează un element care este atributul prezent.
A Selector de atribute = Selectează un element în care valoarea acestui atribut se potrivește exact cu cea atribuită.
A Selector de atribute *= Selectează un element a cărui valoare de atribut conține o instanță atribuită textului.
A Selector de atribute ^= Selectează un element a cărui valoare pentru acest atribut începe cu cea atribuită textului.
A Selector de atribute $= Selectează un element dacă valoarea acestui atribut se termină cu textul specificat.
A Selector de atribute ~= Selectează un element în care valorile acestui atribut sunt separate prin spații și se potrivesc exact cu cuvântul specificat.
A Selector de atribute | = Selectează un element în care valoarea acestui atribut este separată printr-o cratimă și începe cu cuvântul specificat.
Pseudoclase
Pseudo-clasele sunt similare cu clasele originale din HTML, cu toate acestea nu sunt strict definite, ci sunt create dinamic ca urmare a modificărilor în structura documentului. Cea mai mare extensie a pseudo-clasei, și poate ați mai studiat-o, este: hover. Vă rugăm să rețineți că această pseudo-clasă începe cu un dublu (:), ca toate celelalte pseudo-clase.
posilan pseudoclasic
Principalele pseudo-clase includ două pseudo-clase care se înfășoară una în jurul celeilalte. Aceste pseudoclase :link și :visited și snch indică faptul că mesajul a fost trimis sau nu a fost livrat. Pentru a seta stilul de trimitere, care nu a fost încă publicat, grupul include pseudo-clasa :link, iar pseudo-clasa :visited specifică stilul de trimitere, care a fost deja publicat pe baza istoricului lor.
A:link (...) a:vizitat (...)
Pseudoclase dii koristuvacha
Un element poate fi bazat dinamic pe diferite pseudo-clase, cum ar fi :hover, :active și :focus. Pseudo-clasă:hover stagnează la element, dacă utilizatorul trece cursorul peste element, cel mai adesea vikoristavatsya cu mesajele. Pseudoclasă: activ stagnează la element, dacă utilizatorul aduce elementul la masă, de exemplu, atunci când este apăsat pe unul nou. Eu, să zicem, pseudo-clasa: focusul este setat pe element, dacă utilizatorul a creat elementul din punctul de vedere al lateral, folosind adesea tasta Tab suplimentară, deplasându-se de la un element la altul.
A:hover (...) a:activ (...) a:focus (...)
Pseudoclasele vor deveni o interfață
În mod similar, se speră că există și pseudoclase asociate cu starea elementelor interfață koristuvach, zokrema, în mijlocul formelor. Aceste pseudo-clase includ: activat,: dezactivat,: verificat și: nedeterminat.
Pseudoclasa :enabled selectează câmpurile care sunt activate și disponibile pentru motorul de căutare, iar pseudoclasa :disabled selectează câmpurile care au atributul dezactivat atașat. Multe browsere tind să întunece astfel de câmpuri blocate pentru a informa utilizatorii despre cele că câmpul nu este disponibil pentru interacțiune; stilul lor poate fi ajustat prin pseudo-clasa: disabled.
Intrare: activat (...) intrare: dezactivat (...)
Celelalte două elemente ale interfeței, pseudoclasele :checked și :indeterminate, sunt cuprinse în proporții și alternanțe. Pseudo-clasă :checked selectează proporții sau variabile, care, după cum puteți vedea, sunt desemnate. Dacă steagul i se cere să remixeze nu mărci și nu selecții, el trăiește într-o stare nemarcată, pentru care pseudoclasa :indeterminate poate fi folosită pentru a viza elemente similare.
Intrare: verificat (...) intrare: nedeterminat (...)
Pseudoclase de structură și poziție
Un număr de pseudo-clase sunt atribuite structurii și poziției pe baza elementelor situate în arborele documentului. Aceste pseudo-clase vin în diferite forme și dimensiuni, skin-urile din care își asigură funcția unică. Unele pseudo-clase au apărut chiar mai devreme decât altele, iar CSS3 a adus o mulțime de beneficii cadran nou pseudoclase pe lângă cele principale.
:primul-copil, :ultimul-copil și:unicul-copil
Primele pseudoclase structurale, pe care mai degrabă ar trebui să le dai vina pentru tot, sunt: primul-copil,: ultimul-copil și: singur-copil. Pseudoclasa :first-child alege un element, deoarece este primul copil din tată, la fel și pseudoclasa :last-child alege un element, deoarece rămâne cu tatăl. Aceste pseudo-clase sunt ideale pentru selectarea primului sau ultimului element din listă. În plus, singurul copil selectează un element, deoarece este un singur element în tată. Ca alternativă, pseudoclasa :only-child ar putea fi scrisă ca :first-child:last-child , dar :only-child este mai puțin specific.
Aici selectorul li:first-child selectează primul element din listă, în timp ce li:last-child selectează ultimul element din listă, rândurile 2 și 10 sunt selectate în acest fel. Selectorul div:only-child ghicește
, care este un copil al elementului Tatălui, fără alte elemente controversate. Rândul 4 este selectat din ce opțiune, deci există doar una moment în care pe listă.Li:primul copil (...) li:last-child (...) div:only-child (...)
- Acest punct va fi discutat
-
Acest div va fi numit
-
...
...
- Acest punct va fi discutat
:primul-de-tip, :ultimul-de-tip și:doar-de-tip
Descoperirea primului copil, rămas și singur al tatălui, este foarte dificilă și adesea doar necesară. Cu toate acestea, uneori doriți să selectați doar primul copil, rămas sau singur, al elementului de tip cântător. De exemplu, poate doriți să selectați fie primul, fie ultimul paragraf din mijlocul articolului sau, poate, fără imaginea din articol. Din fericire, pseudoclasele ajută în acest sens: first-of-type,: last-of-type și: only-of-type.
Pseudo-clasa :first-of-type selectează primul element de tipul său în mijlocul tatălui, la fel și pseudo-clasa :last-of-type selectează elementul rămas din tipul său în mijlocul tatălui. Pseudo-clasa: only-of-type alege un element care este singurul de acest tip din Patria.
În următoarele pseudoclase p:first-of-type și p:last-of-type, selectați, evident, primul și ultimul paragraf din articol, indiferent dacă sunt primii sau ultimii copii din articol. Rândurile 3 și 6 sunt selectate de selectori. Selectorul img:only-of-type înseamnă că imaginile din rândul 5 sunt singurele imagini care apar în statistici.
P:primul-de-tip (...) p:ultimul-de-tip (...) img:numai-de-tip (...)
...
Acest paragraf va fi șters
Acest paragraf va fi șters
...
Există o serie de pseudo-clase de structură și condiții pentru selectarea elementelor pe baza numerelor sau a tipurilor de algebră. Aceste pseudoclase includ :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) și :nth-last-of-type(n) . Toate aceste pseudoclase unice încep cu nth și formează numere în mijlocul brațelor rotunde, care sunt indicate prin simbolul n.
Numărul de simboluri care se află în arcurile rotunde indică exact ce element sau elemente sunt alese. Folosind un anumit număr, calculați elementul de la începutul sau de la sfârșitul arborelui documentului, apoi selectați-l. Este ușor să calculați numărul de elemente de la începutul sau sfârșitul arborelui documentului și să selectați grupul sau repetarea acestora.
Vykoristannya de numere și soiuri în pseudo-clase
După cum sa menționat deja, căutarea unui anumit număr într-o pseudo-clasă calculează de la începutul sau de la sfârșitul arborelui documentului și selectează un element specific. De exemplu, selectorul li:nth-child(4) este al patrulea element din listă. Căutarea începe de la primul articol din listă și crește cu câte unul pentru fiecare articol din listă până când găsiți al patrulea element și îl selectați. Când este atribuit un anumit număr, acesta poate fi pozitiv.
Formatele pentru pseudoclase sunt an, an+b, an-b, n+b, -n+b și -an+b. Aceeași expresie poate fi tradusă și citită ca (a×n)±b. Variabila a denotă multiplicatorul din care se calculează elementele, iar variabila b indică semnele care vor începe și vor continua.
De exemplu, selectorul li:nth-child(3n) este semnificativ pentru al treilea element din listă. Acest virus este similar cu 3×0, 3×1, 3×2 etc. După cum puteți vedea, rezultatele acestui proces sunt alese de al treilea, al șaselea și al treilea element.
În plus, cuvintele cheie impar și par pot avea sens. Imediat ce il mirosi, selectezi, evident, elemente nepereche si nepereche. Dacă cuvintele cheie nu se potrivesc, tastați 2n+1 selectează toate elementele nepereche, iar tipul 2n selectează toate elementele pereche.
Selectorul li:nth-child(4n+7) alocă al patrulea element din listă începând de la al șaptelea element. Din nou, vicorul acestui virus este echivalent cu (4×0)+7, (4×1)+7, (4×2)+7 și așa mai departe. Rezultatele acestei viraza conduc la selectarea celui de-al șaptelea, al unsprezecelea, al cincisprezecelea și al patrulea element de piele.
Când argumentul n este selectat fără un număr în față, a este evaluat ca fiind egal cu 1. Selectorul li:nth-child(n+5) selectează următorul articol din listă, începând cu al cincilea, lăsând primele patru elemente. în listă neselectat. Expresia înseamnă (1×0)+5, (1×1)+5, (1×2)+5 etc.
Pentru a crea discursuri complexe, pot fi folosite numere negative. De exemplu, selectorul li:nth-child(6n-4) selectează al șaselea element din listă, începând cu -4, selectând un alt, al optulea, al paisprezecelea articol din listă și așa mai departe. Același selector li:nth-child(6n-4) poate fi scris și ca li:nth-child(6n+2) fără variabila negativă b.
Un argument negativ sau un argument negativ trebuie să fie însoțit de un argument pozitiv b. Dacă argumentului n i se trece o variabilă negativă a, atunci variabila b indică cât de mare va fi atingerea. De exemplu, selectorul li:nth-child(-3n+12) selectează al treilea element din lista cu primele douăsprezece elemente. Selectorul li:nth-child(-n+9) selectează primele nouă elemente din listă, cele rămase sunt modificate în -1 fără numărul specificat.
:al-al-lea-copil(n) și:al-al-lea-ultimul-copil(n)
Având o înțelegere generală a modului în care numerele și expresiile funcționează în pseudo-clase, să aruncăm o privire la pseudo-clasele originale, unde numerele și expresiile pot fi diferențiate, în primul rând :nth-child(n) și :nth-last- copil(n). Aceste pseudoclase sunt asemănătoare cu: primul copil și: ultimul copil, prin aceea că se uită și iau în considerare toate elementele din tată și selectează doar ultimul element. :nth-child(n) funcționează de la începutul arborelui documentelor, iar :nth-last-child(n) funcționează de la sfârșitul arborelui documentelor.
Pseudo-clasa vikorist: nth-child(n), haideti sa aruncam o privire la selectorul li:nth-child(3n). Aceasta înseamnă al treilea element din listă, deci rândurile 4 și 7 vor fi selectate.
Li:nth-child(3n) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
Selectați o altă expresie în pseudo-clasă: nth-child (n) oferă o altă selecție. Selectorul li:nth-child(2n+3) , de exemplu, selectează un alt element din listă, începând cu al treilea. Ca rezultat, articolele vor fi selectate în rândurile 4 și 6.
Li:nth-child(2n+3) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
Schimbarea diavolului este determinată, de data aceasta cu semnificații negative, dând o nouă alegere. Aici selectorul li:nth-child(-n+4) înseamnă că dacă elementele de sus din listă nu lasă alte elemente vizibile, rândurile de la 1 la 4 vor fi selectate.
Li:nth-child(-n+4) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
Adăugarea unui număr negativ înainte de argumentul n schimbă din nou selecția. Aici selectorul li:nth-child(-2n+5) desemnează un alt element din lista primelor cinci articole, astfel încât articolele din rândurile 2, 4 și 6 vor fi selectate.
Li:nth-child(-2n+5) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
Înlocuirea pseudoclasei :nth-child(n) cu :nth-last-child(n) schimbă direct fluxul, astfel încât fluxul începe acum la sfârșitul arborelui documentului. Selectorul li:nth-last-child(3n+2) , de exemplu, selectează al treilea element din listă, începând de la celălalt până la ultimul, căzând direct pe listă. Aici elementele din listă sunt selectate în rândurile 3 și 6.
Li:nth-ultimul-copil(3n+2) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
:nth-of-type(n) și:nth-of-type(n)
Pseudoclasele :nth-of-type(n) și :nth-last-of-type(n) sunt foarte asemănătoare cu :nth-child(n) și :nth-last-child(n) , în loc să ia ținând cont de piele elementul din mijlocul pseudoclasei :nth-of-type(n) și :nth-last-of-type(n) este protejat de elemente de tip propriu. De exemplu, atunci când editați paragrafe din pseudoclasele :nth-of-type(n) și :nth-last-of-type(n), omiteți orice titluri,
și diferite elemente, care nu sunt în paragrafe, în timp ce :nth-child(n) și :nth-last-child(n) vor ține cont de elementul skin, indiferent de tipul acestuia, selectându-le doar pe acelea dintre ele care corespund element în selectorul specificat. În plus, aceleași expresii posibile care pot fi găsite în :nth-child(n) și :nth-last-child(n) sunt disponibile și în pseudoclasele :nth-of-type(n) și :nth- ultimul de tip (n) .Pseudoclasa vikorist :nth-of-type(n) în selectorul p:nth-of-type(3n) putem identifica al treilea paragraf al tatălui, independent de alte elemente native din mijlocul tatălui. Aici paragrafele sunt selectate în rândurile 5 și 9.
P:nth-of-type(3n) (...)
...
Acest paragraf va fi șters
...
Acest paragraf va fi șters
Ca și în cazul pseudoclaselor :nth-child(n) și :nth-last-child(n) , principala diferență între :nth-of-type(n) și :nth-last-of-type(n) constă în faptul că acel :nth-of-type(n) respectă elementele de la începutul arborelui documentului, iar :nth-last-of-type(n) respectă elementele de la sfârșitul arborelui documentului.
Folosind pseudoclasa :nth-last-of-type(n), putem scrie un selector p:nth-last-of-type(2n+1) care selectează următorul paragraf de la sfârșitul elementului Tatălui, începând din paragraful rămas. Aici paragrafele sunt selectate în rândurile 4, 7 și 9.
P:nth-ultim-de-tip(2n+1) (...)
...
Acest paragraf va fi șters
...
Acest paragraf va fi șters
Acest paragraf va fi șters
Pseudo-clasă: țintă
Pseudo-clasa :target este utilizată pentru a stila elementele atunci când valoarea atributului id este potrivită cu eticheta de fragment URI. Un astfel de fragment din URI este recunoscut prin caracterul suplimentar (#) și orice îl urmează imediat. Adresele http://example.com/index.html#hello includ indicatorul salut. Dacă evitați valorile atributului id al elementului de pe pagină, de exemplu,
Pseudoclasa: gol
Pseudo-clasă: gol vă permite să selectați elemente care nu interferează cu copiii sau cu textul. Comentariile, instrucțiunile de procesare și textul gol nu sunt respectate de copii și nu sunt privite ca atare.
Wikoristannya pseudoclasă div:mijloc gol
fara copii, citeste textul. Vibrano inferior in randurile 2 si 3, fragmentele puturoase sunt absolut goale. Mintiți fără importanță pe cei care sunt diferiți Comentariu de răzbunare, nu respecți copilul, un astfel de rang este abandonat gol. Primul plasați textul, pe al treilea loc o curățare, iar pe locul rămas elementul copil , în acest fel, toate sunetele sunt oprite și pornite.Div: gol (...)
Buna ziua
Pseudoclasa: nu
Pseudoclasa :not(x) ia un argument și filtrează selecția care va fi subdivizată. Selectorul p:not(.intro) este o pseudo-clasă :nu este atribuită unui paragraf fără clasa intro. Elementul paragraf este alocat capului selectorului, urmat de pseudoclasa :not(x) . În mijlocul brațelor există un selector de bară transversală, care are clasa intro.
Mai jos selectoarele div:not(.awesome) și :not(div) pseudo-clasa vikorist :not(x) . Selectorul div:not(.awesome) înseamnă orice
fără clasa awesome, deoarece selectorul :not(div) înseamnă un element care nu este . Drept urmare, selectăm în rândul 1, precum și două diviziuni în rândurile 3 și 4. Un singur element neselectat Cu clasa minunată, unele părți ale acesteia depășesc granițele a două pseudo-clase.Div:not(.awesome) (...) :not(div) (...)
Acest div va fi numit
...
Această secțiune va avea loc Această secțiune va avea locExemplu din pseudo-clase
Număr
Gravets
Poziţie
Creştere
Vaga
8
Marco Belinelli
G
6-5
195
5
Carlos Boozer
F
6-9
266
...
Tabel ( chenar-restrângere: separat; margine-spațiere: 0; lățime: 100%; ) th, td ( padding: 6px 15px; ) th ( fundal: #42444e; culoare: #fff; text-align: left; ) tr :primul copil th:first-child ( chenar-sus-stânga-raza: 6px; ) tr:first-child th:last-child ( chenar-sus-dreapta-raza: 6px; ) td ( chenar-dreapta: 1px solid #c6c9cc; chenar-jos: 1px solid #c6c9cc; ) td:primul-copil (chenar-stânga: 1px solid #c6c9cc; ) copil td:primul-copil (chenar-jos-stânga-raza: 6px; ) tr: ultimul-copil td:ultimul-copil ( chenar-jos-dreapta-rază: 6px; )
Revizuirea pseudoclaselor fundul Nume Descriere
o legătură Pseudoclasa Posilan El alege mesajul, ca un koristuvach fără să se uite la el.
a: vizitat Pseudoclasa Posilan Selectează mesajul care a fost trimis de koristuvach.
a:hover Pseudoclasa diii Selectează un element atunci când utilizatorul mută cursorul.
a:activ Pseudoclasa diii Selectează un element dacă koristuvach îl activează.
concentrare Pseudoclasa diii Selectează un element dacă koristuvach l-a lovit cu un punct de respect.
intrare: activat Voi deveni o pseudo-clasă Selectează un element din opțiunea disponibilă.
intrare: dezactivat Voi deveni o pseudo-clasă Selectează un element din starea dezactivată cu atributul suplimentar dezactivat.
intrare: verificat Voi deveni o pseudo-clasă Ensignul alege sau peremikach, care este desemnat.
intrare: nedeterminat Voi deveni o pseudo-clasă El alege un stendard sau un remixer, care nu are semne sau semne, lipsindu-l într-o stare necunoscută.
li:primul copil Pseudoclasă structurală El alege primul element de la tatăl său.
li:ultimul-copil Pseudoclasă structurală El alege elementul rămas de la tatăl său.
div:copil-unic Pseudoclasă structurală Selectează un element de la tata.
p: primul de tip Pseudoclasă structurală El alege primul element de tipul său de la tatăl său.
p: ultimul de tip Pseudoclasă structurală El alege elementul rămas de tipul său de la tatăl său.
img:numai-de-tip Pseudoclasă structurală El alege un element de genul lui de la tatăl său.
li:nth-child(2n+3) Pseudoclasă structurală Selectează un element care reprezintă cantitatea sau expresia specificată, luând în considerare toate elementele de la începutul arborelui documentului.
li:nth-ultimul-copil(3n+2) Pseudoclasă structurală Selectează un element care reprezintă cantitatea sau valoarea specificată, inclusiv toate elementele de la sfârșitul arborelui documentului.
p:nth-of-type(3n) Pseudoclasă structurală Selectează un element care reprezintă un număr sau o expresie dată, în funcție de elementul din rădăcina arborelui documentului.
p:nth-ultim-de-tip (2n+1) Pseudoclasă structurală Selectează un element care reprezintă cantitatea sau tipul specificat, în funcție de tipul elementului de la sfârșitul arborelui documentului.
secțiune:țintă Pseudo-clasă: țintă Selectează un element a cărui valoare a atributului ID se potrivește cu indicatorul de fragment URI.
div:gol Pseudoclasa: gol Selectează un element care nu este potrivit pentru copii sau pentru text.
div:nu(.superb) Pseudoclasa: nu Selectează un element fără a furniza un argument declarat.
Pseudoelemente
Pseudo-elementele sunt elemente dinamice care nu există în arborele documentului și, atunci când sunt utilizate cu selectoare, pseudo-elementele oferă părți unice ale paginii care pot fi stilizate. Un punct important de remarcat este că doar un pseudo-element poate fi utilizat în selector la momentul potrivit.
Pseudo-elemente text
Primele pseudo-elemente implementate au fost pseudo-elemente text: prima literă și: prima linie. Pseudo-elementul :first-letter atribuie prima literă textului din mijlocul elementului, la fel cum :first-line atribuie primul rând textului din mijlocul elementului.
În demonstrație, primul rând al paragrafului cu clasa alfa primește o dimensiune mare a fontului și o culoare portocalie, ca și primul rând al paragrafului cu clasa bravo. Această selecție a fost compilată folosind pseudoclase de text: prima literă și: prima linie, evident.
Alfa:prima literă, .bravo:prima linie (culoare: #ff7b29; dimensiunea fontului: 18px; )
Lorem ipsum dolor...
Integer eget enim...
Demonstrarea pseudo-elementelor textului
Pseudo-elemente care sunt generate în schimb
Pseudo-elementele :before și :after creează noi pseudo-elemente mici în mijlocul elementului selectat. Cel mai adesea, aceste pseudo-elemente sunt folosite împotriva celor asociate cu puterea conținutului pentru a adăuga informații neimportante în lateral, dar acest lucru nu va fi întotdeauna cazul. Adăugarea acestor pseudo-elemente poate adăuga componente la interfața backend fără a fi nevoie de a caracteriza documentul cu elemente non-semantice.
Pseudo-elementul :before creează un pseudo-element înainte sau înaintea elementului selectat, în timp ce :after creează un pseudo-element după sau în spatele elementului selectat. Aceste pseudo-elemente sunt afișate introduse în mijlocul elementului selectat, și nu între ele. Pseudo-elementul inferior :after este folosit pentru a afișa valoarea atributului href în brațele rotunde de după post. Aceste informații sunt utile, dar, din păcate, nu orice browser acceptă aceste pseudo-elemente.
A:după (culoare: #9799a7; conținut: " (" attr(href) ")"; dimensiunea fontului: 11px; )
Shukati pe internet Aflați cum să creați un site web
Demonstrarea pseudo-elementelor care sunt generate în schimb
Pseudo-element::selectie
Pseudo-elementul ::selection denotă partea din document care este vizibilă pentru utilizator. Imaginile pot fi stilizate, dar numai folosind comenzile de culoare , fundal , culoare de fundal și umbră text. Warto indică faptul că strălucirea imaginii de fundal este ignorată. În același timp, puterea fundalului poate fi scurtată pentru a adăuga culoare, altfel orice imagine va fi ignorată.
Pliere dublă (:) și pliere dublă dublă (::)
Pseudo-elementul ::selection a fost adăugat la CSS3 prin încercarea de a adăuga pseudo-clase la pseudo-elemente folosind subdosarul care a fost adăugat la pseudo-elemente. Din fericire, majoritatea browserelor vor accepta semnificația elementelor duble simple sau subordonate în pseudo-elemente, astfel încât pseudo-elementul ::selection este întotdeauna susceptibil să înceapă cu un element dublu dublu.
Când vedeți oricare dintre textul demonstrativ de mai jos, fundalul devine portocaliu pentru pseudo-elementul ::selection. De asemenea, arătați respect față de ::-moz-selection. Prefixul Mozilla a fost adăugat pentru a se asigura Îți voi oferi cea mai bună atingere pentru toate browserele.
::-moz-selection ( fundal: #ff7b29; ) ::selection ( fundal: #ff7b29; )
Demonstrarea pseudo-elementelor
Săgeată ( fundal: #2db34a; culoare: #fff; afișare: bloc inline; înălțime: 30px; înălțime linie: 30px; umplutură: 0 12px; poziție: relativă; decor text: niciunul; ) săgeată:după ( conținut: ""; înălțime: 0; poziție: absolut; lățime: 0; ) .săgeată: înainte ( chenar-jos: 15px solid #2db34a; chenar-stânga: 15px solid transparent; #2db34a; stânga: -15px; ) .săgeată: după ( chenar-jos: 15px solid transparent; chenar-stânga: 15px solid #2db34a; chenar-sus: 15px solid transparent; dreapta: -15px; ) .arrow:hover ( fundal: #ff7b29; ) .arrow:hover:before ( chenar-jos: 15px solid #ff7b29; chenar-sus: 15px solid #ff7b29; ) .arrow:hover:after ( chenar-stânga: 15px solid #ff7b29; )
Suport pentru selectoare în browsere
La acel moment, pe măsură ce acești selectori demonstrează diferitele posibilități și viabilitatea de a lucra eficient, discursurile uimitoare de la Te voi ajuta cu CSS, acestea suferă uneori de un suport prost pentru browser. Înainte de a face acest lucru, deoarece acest lucru este mai critic, examinați selectoarele pe care doriți să le utilizați în cele mai populare browsere și apoi aflați despre cele care vi se potrivesc diferit.
CSS3.info dispune de instrumentul de testare a selectoarelor CSS3, care vă informează despre ce selectoare sunt acceptate de browser. De asemenea, este o idee proastă să verificați suportul pentru browser direct în cel nou.
Pe Smashing Magazine
- Înțelegerea: al n-lea copil Expresii de pseudoclasă pe SitePoint
- Îmblanzirea selectoarelor CSS avansate pe Smashing Magazine
Un selector face parte dintr-o regulă CSS care spune browserului ce element(e) din pagina web vor fi stilizate.
Termenul selector poate fi aplicat unui selector simplu, unui selector compus, unui selector complex sau unei liste de selectori.
Inainte de iertați selecționatorii apărea:
- selector de tip
- selector universal
- selectoare de atribute
- Selector ID
- selector de clasă
- pseudo-clasic
Selector CSS fundul Descriere CSS
.clasă
.clasa mea
Selectează toate elementele clasei myClass (class="myClass").
1
#id
#principal
Selectează un element cu identificatorul main (id="main").
1
*
Selectați elementele uscate.
2
element
span
Selectați toate elementele .
1
element, element
div, span
Selectați toate elementele și toate elementele .
1
[atribut]
Selectează toate elementele cu atributul titlu.
2
[atribut="valoare"]
Selectează toate elementele cu atributul titlu, a căror valoare este exact aceeași cu valorile specificate în selector (title="cost)").
!}!}
2
[atribut~="valoare"]
Selectează toate elementele cu atributul titlu, a căror valoare (orice loc) are o secvență (sub forma cuvântului din jur) „unu” (titlu=" unu și doi)").
!}!}
2
[atribut|="valoare"]
Selectați toate elementele cu atributul lang a căror valoare începe cu „ru”.
2
[atribut^="valoare"]
A
Vibrația elementului pielii cu atributul href, a cărui valoare începe cu „https”.
3
[atribut$="valoare"]
Selectează toate elementele cu un atribut src a căror valoare se termină în „.png” (src="some_img.png").
3
[atribut*="valoare"]
Selectează toate elementele cu atributul titlu, a căror valoare (orice loc) are o secvență (a se vedea cuvântul sau partea din jur) „unu” (titlu=" unu și doi)").
!}!}
3
Selector de depozit- aceasta este o succesiune de selectori simpli, care sunt separate prin combinatoare, adică un selector este urmat imediat de pași. Selectează un element care se potrivește tuturor selectoarelor simple care pot fi plasate. Un selector de tipul sau un selector universal, care este inclus înaintea selectorului de depozit, este vinovat că a fost deranjat în primul rând în această secvență. Într-un selector pliat, este permis un singur tip de selector sau un selector universal.
Span.className p.className1.className2#someId:hover
Selector pliabil- Aceasta este succesiunea selectoarelor, separate prin combinatoare.
Lista selectoarelor- selectoare tse, reasigurare prin coma.
Combinatori
Pentru a combina selectoare CSS simple, combinatoarele sunt folosite pentru a indica interacțiunile dintre selectoarele simple. Există o mulțime de combinatoare CSS2 diferite și un CSS3 suplimentar, iar dacă le folosiți, acestea vor schimba natura selectorului în sine.
Pseudo-clasic
O pseudo-clasă este un selector simplu care este folosit pentru a selecta ceva care nu poate fi selectat folosind alți selectori, dar poate fi selectat, dar nu într-un mod important.
Pseudo-clasă fundul Descriere CSS
:legătură
o legătură
Selectați toate evenimentele neprevăzute.
1
:vizitat
a: vizitat
Selectați toate intrările trimise.
1
:activ
a:activ
Trimitere activă prin vibrare.
1
:planare
a:hover
Vibrație trimisă atunci când cursorul este plasat peste urs.
1
: Concentrează-te
intrare: focus
Selectați elementul , ceea ce este în atenție.
2
:primul copil
p:primul copil
Vibrația elementului pielii Care este prima fiică a tatălui său.
2
:lang(limba)
p:lang(ro)
Vibrația elementului pielii Cu atributul lang, semnificația începe cu „ru”.
2
:primul de tip
p: primul de tip
Vibrația elementului pielii Care este primul dintre elemente
3
: ultimul de tip
p: ultimul de tip
Vibrația elementului pielii Ce rămâne din elemente
Elementul tatălui său.
3
:numai-de-tip
p:numai-de-tip
Vibrația elementului pielii Care este un singur element
Elementul tatălui său.
3
:singurul copil
p:copil-unic
Vibrația elementului pielii Care este un singur element copil al elementului tatălui său.
3
:nth-child(n)
p:nth-child(2)
Vibrația elementului pielii Elementul tatălui său.
3
: al-al-lea-ultimul-copil(n)
p:al-al-al-lea-ultimul-copil(2)
Vibrația elementului pielii Ce alt element copil din elementul tatălui său, respectând celălalt element copil.
3
:nth-of-type(n)
p:nth-of-type(2)
Vibrația elementului pielii Care este un alt element copil
Elementul tatălui său.
3
:nth-ultimul-de-tip(n)
p:nth-ultimul-de-tip(2)
Vibrația elementului pielii Care este un alt element copil
Elementul tatălui său, mirosind ca elementul fiică rămas.
3
3
:nu(selector)
:nu(p)
Selectați elemente uscate, în jurul elementului .
3
Pseudo-elemente
Un pseudo-element este un element virtual care nu apare explicit în arborele elementelor documentului. Pseudo-elementele sunt folosite pentru selectarea acelor părți ale unui element care nu pot fi asociate cu alți selectori, precum și pentru stilizarea nu a întregului element, ci a altor părți ale acestuia.
Ce este un selector CSS?- aceasta este o descriere a unui element sau a unui grup de elemente care indică browserului ce element să selecteze pentru stilul într-un anumit stil. Să aruncăm o privire la selectoarele CSS de bază.
1) .X
.topic-title (culoare-fond: galben; ) Selector CSS clasa X. Diferența dintre id și clasă este că aceeași clasă poate fi în mai multe elemente de pe pagină, iar id-ul este întotdeauna unic. Klasi varto vikoristovat pentru stasovannya același stil până la multe elemente.
- Crom
- Firefox
- Safari
- Operă
2) #X
#conținut (lățime: 960px; marjă: 0 automat; ) Selector CSS pentru id. Semnul din fața selectorului CSS X selectează un element cu id = X. Majoritatea stilurilor după id trebuie să-și amintească întotdeauna că este unic - numai un astfel de id este atribuit paginii. Este mai bine să folosiți selectoare pentru clase, combinații de clase sau nume de etichete. Tim, nu mai puțin, selectoare după ID sunt binevenite să fie folosite în testarea automată, deoarece permiteți reciproc să interacționeze cu ei înșiși element necesarȘi mă bucur că există doar unul dintre acestea pe pagină.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
3) *
* ( marja: 0; umplutură: 0; ) Selector CSS pentru toate elementele. Simbolul stea selectează toate elementele care se află pe pagină. Există mulți specialiști care folosesc această metodă pentru a reseta (zero) marjele și valorile de umplutură ale tuturor elementelor paginii. Tim nu este mai puțin, în practică este mai bine să nu funcționeze așa, deoarece acest selector CSS poate interfera foarte mult cu browserul căutând prin toate elementele de pe pagină.
Simbolul * poate fi modificat și pentru a afișa toate elementele copil:
#header * ( chenar: 5px gri solid; )
În acest exemplu, toate elementele copil (pad-urile) ale elementului #header sunt vizibile. Asigurați-vă că rețineți că acest selector este important pentru browser.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
4) X
a (culoare: verde; ) ol ( margine-stânga: 15px; ) Selector de tip CSS. Cum să selectezi toate elementele de același tip, deoarece nu miros nici id, nici clasă? Varto vikorystuvati selector CSS în spatele tipului de element. De exemplu, pentru a selecta toate listele ordonate de pe pagină, selectați ol (...) așa cum se arată mai sus.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
5) X Y
li a (greutatea fontului: bold; text-decor: niciuna; ) Selector de pad CSS sau Selector de elemente copil CSS Vikoristii sunt cel mai adesea abuzati. Pentru a fi învingător, este necesar să selectați elemente de tip cântat din multe elemente fiice. De exemplu, trebuie să vedeți toate mesajele care sunt în elementul li. În acest caz, utilizați acest selector. Vikoryst și șnururile unor astfel de selectoare, mai întâi întrebați-vă și puteți vikorist pentru o secvență și mai scurtă de selectoare pentru elementul vizibil.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
6) X+Y
div + p (familie de fonturi: „Helvetica Neue”, Arial, sans-serif; dimensiunea fontului: 18px; ) Selector de elemente compuse jefuiește numai un element de tip Y, care vine imediat după elementul X. Pentru acest tip de skin, paragraful vine imediat după elementul skin div, selectați un tip și o dimensiune specială a fontului.
Ce browsere sunt acceptate: - IE7+
- Firefox
- Crom
- Safari
- Crom
7) X > Y
#conținut > ul ( chenar: 1px verde continuu; ) Selector de pad CSS. Diferența dintre selectoarele X Y și X > Y este că selectorul este vizibil atunci când selectați doar elementele secundare din mijloc (selectând doar pad-urile directe). De exemplu:
- Element din listă
- Primul articol de pe listă
- Element din listă
- Element din listă
Selector CSS #content > ul select only ul, care este plasat direct pe blocul div cu id = "container". Nu alege ul, care este primul li. Acesta este un selector CSS puternic.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
8) X ~ Y
ol ~ p ( margine-stânga: 10px; ) Selector de elemente surori (shaling). mai puțin suvory nizh X + Y. Vіn selectați ca primul și alte elemente p, care merg după ol.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
a:link (culoare: verde; ) a:vizitat (culoare: gri; ) Pseudo-clasă: link Vikorist pentru a selecta toate mesajele pe care încă nu au fost făcute clic. Dacă este necesar să păstrați stilul de cânt înainte de a-l trimite, atunci pentru cine este vikory pseudo-clasa:vizitata.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
10) X
a(culoare:roșu;) Selector CSS din spatele atributului. Din ce aplicație selectați mesajele care afișează atributul titlu.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
11) X
a (culoare: galben; ) Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
12)X
a (culoare: #dfc11f; ) Steaua înseamnă că valoarea poate fi în atribut (în orice parte a atributului href). În acest fel, vor fi selecții și trimiteri de la https://www..stijit.. Până la toate trimiterile alese, va fi o culoare aurie.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
13) X
a ( fundal: url(path/to/external/icon.png) fără repetare; padding-left: 15px; ) Pe unele site-uri, mesajele care trimit către alte site-uri au pictograme mici cu săgeți pentru a arăta ce mesaje sunt trimise. Caratul „^” este simbolul pentru urechea rândului. Astfel, pentru a selecta toate etichetele al căror href începe cu http, trebuie să utilizați selectorul CSS cu karat, așa cum se arată în aplicație.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
14) X
a (culoare: verde; ) Aici expresia regulată și simbolul $ sunt folosite pentru a indica sfârșitul rândului. În a cărui aplicație putem vedea toate eforturile care se fac pe poze cu extensii.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
15) X
a (culoare: verde; ) Stam aici Selector CSS din spatele atributului koristuvach. Adăugăm atributul nostru puternic data-filetype skin-ului:
posilannya
Acum, cu ajutorul selectorului CSS, puteți selecta toate opțiunile care duc la imagini cu orice extensie.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
16) X
Tilde (~) vă permite să vedeți un singur atribut într-o listă de atribute separate printr-un spațiu. Puteți specifica atributul data-info, în care indicați numărul Cuvinte cheie prin poiană. În acest fel, puteți indica că mesajul a fost trimis către lumea exterioară și către imagine.
posilannya
În plus, putem selecta elemente cu combinațiile de atribute necesare:
/* Selectare element, atribut de date-info pentru orice valoare externă */ a (culoare: verde; ) /* Selectare element, atribut de date-info pentru orice imagine de valoare */ a ( chenar: 2px negru întrerupt; )
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
17) X:verificat
intrare: bifat ( chenar: 3px la început negru; ) Această pseudo-clasă vede doar elemente precum caseta de selectare sau butonul radio și numai dacă sunt deja în poziția desemnată.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
18) X: după
Pseudo-clase: înainte și după: chiar întuneric – creează conținut înainte și după elementul selectat.
Clearfix:după (conținut: ""; afișare: bloc; clar: ambele; vizibilitate: ascuns; dimensiunea fontului: 0; înălțimea: 0; ) .clearfix ( *afișare: bloc inline; _înălțimea: 1%; )
Aici pentru ajutor pentru pseudo-clasa: dupa blocul cu clasa. clearfix creează un rând gol și apoi îl șterge. Această abordare este abuzată, deoarece este imposibil să stingi puterea debordării: ascuns.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
19) X: hover
div:hover (culoare de fundal: rgba(11,77,130,0.5); ) Îngheață stilul de cântare pentru element atunci când cursorul mouse-ului este plasat peste. Versiuni vechi Internet Explorer zastosovuyut: hover până la posilan.
A:hover (chenar-jos: 1px punctat albastru; )
Ce browsere sunt acceptate: - IE6+ (În IE6 va sta doar până la sfârșit)
- Crom
- Firefox
- Safari
- Operă
20) X: nu (selector)
div:not(#conținut) (culoare: gri; ) Pseudo-clasă nu (încrucișată) Dacă, de exemplu, trebuie să selectați toate div-urile, în plus față de cele cu id="content" .
Folosind același principiu, puteți selecta toate elementele, cu excepția p:
*:nu(p) (culoare: albastru; )
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
21) X::pseudoElement
p::prima linie (greutatea fontului: bold; dimensiunea fontului: 24px; ) Pseudo-elementele pot fi modificate pentru a consolida stilurile până la fragmente de elemente - de exemplu, până la primul rând al unui paragraf sau prima literă a unui cuvânt. Se lipește doar de elementele blocului.
Selectați primul paragraf:
P::prima literă (familie de fonturi: cursiv; dimensiunea fontului: 30px; greutatea fontului: bold; padding-right: 1px; )
Selectați primul rând pentru paragraf:
P:prima linie (dimensiunea fontului: 28px; greutatea fontului: bold; )
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
22) X: primul copil
ul li:primul copil (border-top: none; ) Pseudoclasa primul copil selectează prima parte a elementului Tatălui. Există adesea un wiki pentru a adăuga chenar la primul element din listă. Această pseudo-clasă este la propriu CSS 1.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Opera 3.5+
- Android
23) X:ultimul-copil
ul > li:last-child (border-bottom: none; ) Pseudo-clasa ultimul copil selectează partea rămasă a elementului Tatălui Vіn apărând numai din CSS 3.
Ce browsere sunt acceptate: - IE9+ (IE8 acceptă primul copil, nu ultimul copil. Microsoft (c))
- Crom
- Firefox
- Safari
- Opera 9.6+
- Android
24) X: singur-copil
div p:copilul singur (culoare: verde; ) Pseudo-copil unic de clasă Vă permite să selectați acele elemente care sunt aceleași părți ale părinților voștri.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari 3.0+
- Opera 9.6+
- Android
25) X:nth-child(n)
li:nth-child(3) (culoare: negru; ) Selectează elementul copil cu numărul specificat în parametru. selector de al-lea copil acceptă un număr întreg ca parametru, deci trebuie luat de la 1, atunci. Dacă trebuie să selectați un articol diferit din listă, verificați li:nth-child(2) . Toate pseudo-clasele din vikoristannyam nth-child au apărut numai din CSS 3.
Ce browsere sunt acceptate: - Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
26) X:ultimul-copil(n)
li:nth-last-child(2) (culoare: roșu; ) Ce se întâmplă dacă aveți o listă mare de elemente în ul și trebuie să selectați al treilea element de la sfârșit? În loc să scrieți li:nth-child(109), puteți folosi vikory selector de tampoane rămase al-lea-ultimul-copil. Această metodă este aceeași cu prima, dar continuă de la capăt la capăt.
Ce browsere sunt acceptate: - Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
27) X:nth-of-type(n)
ul:nth-of-type(3) ( chenar: 1px punctat negru; ) Deoarece pe pagină există multe liste neordonate, este necesar să setați stilul la a treia dintre ele, care nu are un id unic, astfel încât să puteți utiliza nth-of-type.
Ce browsere sunt acceptate: - Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
28) X:a-n-ul-ultimul-tip(n)
ul:nth-last-of-type(3) ( chenar: 2px ridge blue; ) Pseudoclasa a n-a-ultimul-tip(n) atribuiri la alegerea celui de-al n-lea element al cântecului tip z kintsya.
Ce browsere sunt acceptate: - Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
29) X:numai-de-tip
li:numai-de-tip (greutatea fontului: bold; ) Pseudo-clasă numai de tip selectează elementele care se află între pereții elementului tatălui. De exemplu, puteți selecta toate uls, care se vor potrivi numai cu aceleași.
Ce browsere sunt acceptate: - Crom
- Firefox 3.5+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
30) X: primul de tip
ul:first-of-type > li:nth-child(3) ( stilul fontului: cursiv; ) Pseudo-clasă prima de tip selectează primul element de tipul dat
Ce browsere sunt acceptate: - Crom
- Firefox 3.5+
- Safari 3.1+
- Opera 9.5+
- Android 2.1+
- iOS 2.0+
Ultima actualizare: 21.04.2016
Atribuirea stilului începe de la selector. De exemplu:
Div( lățime:50px; /* lățime */ înălțime:50px; /* înălțime */ culoarea fundalului:roșu; /* culoarea fundalului */ margine: 10px; /* acces la alte elemente */ )
U la acest tip selector є div. O serie de selectoare definesc numele elementelor care sunt formatate, de exemplu, div, p, h2 etc. Când este selectat un astfel de selector, stilul va fi limitat la toate elementele similare acestui selector. Pentru ca stilul de cânt mai mult să fie consolidat la toate elementele
pe pagina web:
selectoare CSS
selectoare CSS
Există 3 elemente div pe pagină și toate vor fi stilate:
Klasi
Cu toate acestea, aceste elemente în sine necesită o varietate de stilizare. Și aici putem vikorystuvat clasa.
Pentru a atribui un selector unei clase CSS, puneți un punct în fața numelui clasei:
RedBlock (culoare de fundal: roșu; )
Numele clasei poate fi suficient. De exemplu, numele clasei este „redBlock”. Cu toate acestea, în numele clasei este permisă folosirea de litere, cifre, cratime și semne de accent, iar începutul numelui clasei este obligatoriu cu litere.
De asemenea, ajustați cu atenție registrul de nume: denumirile „articol” și „ARTICOL” reprezintă clase diferite.
După atribuirea unei clase, o putem atribui unui element folosind atributul de clasă suplimentar. De exemplu:
Ceea ce este semnificativ este numărul de clase:
CSS elegant
CSS elegant
Identificatori
Pentru a identifica elemente unice pe pagina web, sunt identificați identificatori care sunt alocați unor atribute suplimentare de id. De exemplu, pe pagină puteți avea un bloc de cap sau un antet:
Atribuirea stilurilor pentru identificatori este similară cu alocarea claselor, cu excepția faptului că simbolul hash # este folosit în locul punctului:
ID-uri CSS
Antetul site-ului
Locul principal
Cu toate acestea, rețineți că identificatorii se referă în mare parte la structura paginii web și mai puțin la stilizare. Pentru stilizare, este important să folosiți diferite clase, identificatori mai mici.
Selector universal
Numărul de selectatori de etichete, clase și identificatori în css este, de asemenea, numit selector universal, care este reprezentat de semnul stelar (*). Se aplică stiluri tuturor elementelor de pe pagina html:
*(culoarea fundalului: roșu; )
Stilizarea unui grup de selectoare
Unele stiluri de cântece sunt limitate la o întreagă gamă de selectoare. De exemplu, vrem să acoperim toate rubricile de sub fotoliu. În acest caz, putem converti selectoarele tuturor elementelor prin comă:
selectoare CSS
CSS3
Selector
Grup de selecție
Textul real...
Un grup de selectori poate include atât selectori de etichete, cât și selectori de clase și identificatori, de exemplu:
H1, #header, .redBlock(culoare: roșu; )
Tse tsikavo:
în spatele limitelor elementelor nu vor fi colectate.Mai jos sunt titlurile, rândurile 3 și 5.
Articolul h2 (...)
...
Acest titlu va fi discutat
Acest titlu va fi discutat
Selector direct pentru copii
Autocolantele selectoare trebuie să meargă atât de departe, alegând mai mult decât mi-aș dori. În unele cazuri, pot exista doar copii direcți ai elementului Patrie, dar nu o copie separată a elementului de investiție adânc în mijlocul strămoșului. Această opțiune poate avea un selector copil direct prin plasarea unui semn mai mare decât (>) între elementul părinte și elementul secundar al selectorului.
De exemplu, articolul > p este un selector direct de copil al unui singur element
Fii situat direct în mijlocul elementului . Oricare ar fi elementul<р>plasarea elementului de poză sau investiții în mijlocul unui alt element, , nu vor fi colectate.
Mai jos, paragraful de pe rândul 3, cu o margine dreaptă a tatălui tău , de aceea a fost ales.
Articolul > p (...)
Acest paragraf va fi șters
Selectori contestați
A ști cum să selectezi elementele copil este foarte dificil și tinde să se umple des. Cu toate acestea, elementele controversate, cum ar fi elementele care pot avea un strămoș viu, ar putea fi, de asemenea, nevoie să fie selectate. O astfel de selecție poate fi făcută folosind selectoare arbitrare suplimentare și selectoare secundare.
Selector de dispute Zagalny
Selectorul nativ original vă permite să selectați elemente care vor fi selectate pe baza elementelor lor native, cum ar fi cele care au același tată vechi. Mirosurile sunt create în spatele simbolului tildei (~) între cele două elemente din mijlocul selectorului. Primul element înseamnă că un alt element poate intra în conflict cu el, iar același tată este de vină pentru ambele.
Selector h2~p - acesta este un selector ascuns, caută elemente
Ce urmează după orice elemente
Acesta este tatăl lui. Elementul Shchob
Dacă vorbim, putem merge după orice element
.
Apar paragrafele din rândurile 5 și 9, fragmente de duhoare merg după titlul din arborele documentului și pot fi același tată care se află la antetul original.
H2 ~ p(...)
...
Acest paragraf va fi șters
Acest paragraf va fi șters
Selectori de țară
Uneori este posibil să aveți nevoie de puțin mai mult control, inclusiv abilitatea de a selecta un element complementar care urmează direct după alt element complementar. Selectorul secundar selectează doar elemente controversate care urmează direct unui alt element controversat. În locul simbolului tilde, așa cum este cazul selectorului complementar, selectorul complementar înlocuiește simbolul plus (+) între două elemente din selector. Din nou, primul element înseamnă că celălalt element este vinovat că îl urmărește direct pe următorul și este controversat, iar ambele elemente sunt vinovate de același tată.
Să aruncăm o privire la selectorul de judecători h2 + p. Vor fi colectate mai puține elemente
Cei care merg direct după elemente
. În ambele, poate exista și unul și același element al Tatălui.
Paragraful de pe rândul 5 este selectat deoarece urmează imediat titlul său original și au un element puternic al tatălui.
H2 + p(...)
...
Acest paragraf va fi șters
Exemplu de selectoare auxiliare
Introducere ( afișare: niciuna; ) etichetă, ul ( chenar: 1 px solid #cecfd5; chenar-radius: 6 px; ) etichetă ( culoare: #0087cc; cursor: indicator; afișare: bloc inline; dimensiune font: 18 px; umplutură: 5px 9px; tranziție: toate .15s ease; ) label:hover (culoare: #ff7b29; ); ) nav ( înălțime maximă: 0; depășire: ascuns; tranziție: toate .15 s ușurință; ) input: verificat ~ nav ( înălțime maximă: 500 px; ) ul ( stil listă: niciunul; marjă: 8 px 0 0 0; umplutură : 0; lățime: 100 px; ) li ( chenar-jos: 1px solid #cecfd5; ) li:last-child ( chenar-jos: 0; ) a ( culoare: #0087cc; text-decor: niciunul; ) a:hover (culoare: #ff7b29; )
Selectori de atribute
Aceste tipuri de selectoare pot fi definite și ca selectoare de atribute, în care un element este selectat pe baza unei clase sau a valorii id. Acești selectori de atribute de clasă și id sunt folosiți pe scară largă și apăsați mai tare, dar deloc. Alți selectori de atribute au apărut în Pe lângă stâncile rămase, zokrema, a creat o bandă grozavă în avans din CSS3. Elementele pot fi selectate acum în funcție de ce atribut este și ce valoare conține.
Selector de vizibilitate a atributelor
Primul selector de atribute selectează un element pe baza căruia se află atributul, indiferent de valoarea sa reală. Pentru a selecta un element pe baza atributului său, faceți clic pe numele atributului în brate patrate() la selector. Brațele pătrate pot veni după orice tip sau clasă de selector, în funcție de nivelul de specificitate cerut.
A (...)
Selector de atribute =
Pentru a identifica un element cu aceleași și precis specificate valori, puteți folosi același selector ca și înainte, de data aceasta în mijlocul brațelor pătrate după numele atributului, includeți casetele cu valori. În mijlocul brațelor pătrate se află numele atributului, care vine după semn, exact (=), iar în mijlocul picioarelor este scrisă valoarea atributului.
A (...)
Selector de atribute *=
Dacă dorim să găsim un element pe baza unei părți din valoarea atributului, mai degrabă decât pe o căutare exactă, putem folosi simbolul stea (*) în brațele pătrate ale selectorului. Steaua poate apărea imediat după numele atributului, chiar înainte de semnul de rang. Aceasta înseamnă că în acest moment valoarea poate apărea sau dispărea din atributul evaluat.
A (...)
Selector de atribute ^=
Pe lângă selectarea unui element în funcție de valoarea atributului care apare în text, puteți selecta și un element care se bazează pe cu ce începe valoarea atributului. Utilizarea unui simbol circumflex (^) în brațele pătrate ale selectorului dintre numele atributului și un semn egal înseamnă că valoarea atributului poate începe cu textul atribuit.
A (...)
...
Selector de atribute $=
Lângă selectorul frontal este selectorul de atribute, unde valorile se termină cu text. În loc de simbolul ^, există un semn dolar ($) la brațele pătrate ale selectorului între numele atributelor și semnul egal. Utilizarea semnului dolar înseamnă că valoarea atributului se poate termina cu textul specificat.
A (...)
Selector de atribute ~=
Unele valori ale atributelor pot fi separate prin trecerea unui tip la un moment dat, în care numai unul după altul este potrivit pentru a crea o selecție. În acest caz, simbolul tilde (~) din brațele selectorului pătrat între numele atributului și semnul egal indică valorile atributelor separate prin spații, în care un cuvânt corespunde exact valorii atribuite.
A (...)
Selector de atribute | =
Atunci când valorile atributelor sunt separate prin cratime și nu prin spații, simbolul liniei verticale (|) în brațele selectorului pătrat poate apărea între numele atributului și simbolul de egalitate. O linie verticală înseamnă că valorile atributului pot fi separate printr-o cratimă, iar cuvintele atribut încep cu valoarea atribuită.
A (...)
Aplicarea selectoarelor de atribute
Ul ( stil-listă: niciunul; margine: 0; umplutură: 0; ) a ( poziția fundalului: 0 50%; repetare fundal: fără repetare; culoare: #0087cc; padding-left: 22px; text-decor: nici unul; ) a:hover (culoare: #ff7b29; ) a ( imagine de fundal: url("images/pdf.png"); ) a ( imagine de fundal: url("images/doc.png"); ) a ( imagine de fundal: url("imagini/imagine.png"); ) a ( imagine de fundal: url ("imagini/audio.png"); ) a ( imagine de fundal: url("imagine/video.png" );
O privire asupra selectoarelor de atribute fundul Nume Descriere
A Selector de vizibilitate a atributelor Selectează un element care este atributul prezent.
A Selector de atribute = Selectează un element în care valoarea acestui atribut se potrivește exact cu cea atribuită.
A Selector de atribute *= Selectează un element a cărui valoare de atribut conține o instanță atribuită textului.
A Selector de atribute ^= Selectează un element a cărui valoare pentru acest atribut începe cu cea atribuită textului.
A Selector de atribute $= Selectează un element dacă valoarea acestui atribut se termină cu textul specificat.
A Selector de atribute ~= Selectează un element în care valorile acestui atribut sunt separate prin spații și se potrivesc exact cu cuvântul specificat.
A Selector de atribute | = Selectează un element în care valoarea acestui atribut este separată printr-o cratimă și începe cu cuvântul specificat.
Pseudoclase
Pseudo-clasele sunt similare cu clasele originale din HTML, cu toate acestea nu sunt strict definite, ci sunt create dinamic ca urmare a modificărilor în structura documentului. Cea mai mare extensie a pseudo-clasei, și poate ați mai studiat-o, este: hover. Vă rugăm să rețineți că această pseudo-clasă începe cu un dublu (:), ca toate celelalte pseudo-clase.
posilan pseudoclasic
Principalele pseudo-clase includ două pseudo-clase care se înfășoară una în jurul celeilalte. Aceste pseudoclase :link și :visited și snch indică faptul că mesajul a fost trimis sau nu a fost livrat. Pentru a seta stilul de trimitere, care nu a fost încă publicat, grupul include pseudo-clasa :link, iar pseudo-clasa :visited specifică stilul de trimitere, care a fost deja publicat pe baza istoricului lor.
A:link (...) a:vizitat (...)
Pseudoclase dii koristuvacha
Un element poate fi bazat dinamic pe diferite pseudo-clase, cum ar fi :hover, :active și :focus. Pseudo-clasă:hover stagnează la element, dacă utilizatorul trece cursorul peste element, cel mai adesea vikoristavatsya cu mesajele. Pseudoclasă: activ stagnează la element, dacă utilizatorul aduce elementul la masă, de exemplu, atunci când este apăsat pe unul nou. Eu, să zicem, pseudo-clasa: focusul este setat pe element, dacă utilizatorul a creat elementul din punctul de vedere al lateral, folosind adesea tasta Tab suplimentară, deplasându-se de la un element la altul.
A:hover (...) a:activ (...) a:focus (...)
Pseudoclasele vor deveni o interfață
În mod similar, se speră că există și pseudoclase asociate cu starea elementelor interfață koristuvach, zokrema, în mijlocul formelor. Aceste pseudo-clase includ: activat,: dezactivat,: verificat și: nedeterminat.
Pseudoclasa :enabled selectează câmpurile care sunt activate și disponibile pentru motorul de căutare, iar pseudoclasa :disabled selectează câmpurile care au atributul dezactivat atașat. Multe browsere tind să întunece astfel de câmpuri blocate pentru a informa utilizatorii despre cele că câmpul nu este disponibil pentru interacțiune; stilul lor poate fi ajustat prin pseudo-clasa: disabled.
Intrare: activat (...) intrare: dezactivat (...)
Celelalte două elemente ale interfeței, pseudoclasele :checked și :indeterminate, sunt cuprinse în proporții și alternanțe. Pseudo-clasă :checked selectează proporții sau variabile, care, după cum puteți vedea, sunt desemnate. Dacă steagul i se cere să remixeze nu mărci și nu selecții, el trăiește într-o stare nemarcată, pentru care pseudoclasa :indeterminate poate fi folosită pentru a viza elemente similare.
Intrare: verificat (...) intrare: nedeterminat (...)
Pseudoclase de structură și poziție
Un număr de pseudo-clase sunt atribuite structurii și poziției pe baza elementelor situate în arborele documentului. Aceste pseudo-clase vin în diferite forme și dimensiuni, skin-urile din care își asigură funcția unică. Unele pseudo-clase au apărut chiar mai devreme decât altele, iar CSS3 a adus o mulțime de beneficii cadran nou pseudoclase pe lângă cele principale.
:primul-copil, :ultimul-copil și:unicul-copil
Primele pseudoclase structurale, pe care mai degrabă ar trebui să le dai vina pentru tot, sunt: primul-copil,: ultimul-copil și: singur-copil. Pseudoclasa :first-child alege un element, deoarece este primul copil din tată, la fel și pseudoclasa :last-child alege un element, deoarece rămâne cu tatăl. Aceste pseudo-clase sunt ideale pentru selectarea primului sau ultimului element din listă. În plus, singurul copil selectează un element, deoarece este un singur element în tată. Ca alternativă, pseudoclasa :only-child ar putea fi scrisă ca :first-child:last-child , dar :only-child este mai puțin specific.
Aici selectorul li:first-child selectează primul element din listă, în timp ce li:last-child selectează ultimul element din listă, rândurile 2 și 10 sunt selectate în acest fel. Selectorul div:only-child ghicește
, care este un copil al elementului Tatălui, fără alte elemente controversate. Rândul 4 este selectat din ce opțiune, deci există doar una moment în care pe listă.Li:primul copil (...) li:last-child (...) div:only-child (...)
- Acest punct va fi discutat
-
Acest div va fi numit
-
...
...
- Acest punct va fi discutat
:primul-de-tip, :ultimul-de-tip și:doar-de-tip
Descoperirea primului copil, rămas și singur al tatălui, este foarte dificilă și adesea doar necesară. Cu toate acestea, uneori doriți să selectați doar primul copil, rămas sau singur, al elementului de tip cântător. De exemplu, poate doriți să selectați fie primul, fie ultimul paragraf din mijlocul articolului sau, poate, fără imaginea din articol. Din fericire, pseudoclasele ajută în acest sens: first-of-type,: last-of-type și: only-of-type.
Pseudo-clasa :first-of-type selectează primul element de tipul său în mijlocul tatălui, la fel și pseudo-clasa :last-of-type selectează elementul rămas din tipul său în mijlocul tatălui. Pseudo-clasa: only-of-type alege un element care este singurul de acest tip din Patria.
În următoarele pseudoclase p:first-of-type și p:last-of-type, selectați, evident, primul și ultimul paragraf din articol, indiferent dacă sunt primii sau ultimii copii din articol. Rândurile 3 și 6 sunt selectate de selectori. Selectorul img:only-of-type înseamnă că imaginile din rândul 5 sunt singurele imagini care apar în statistici.
P:primul-de-tip (...) p:ultimul-de-tip (...) img:numai-de-tip (...)
...
Acest paragraf va fi șters
Acest paragraf va fi șters
...
Există o serie de pseudo-clase de structură și condiții pentru selectarea elementelor pe baza numerelor sau a tipurilor de algebră. Aceste pseudoclase includ :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) și :nth-last-of-type(n) . Toate aceste pseudoclase unice încep cu nth și formează numere în mijlocul brațelor rotunde, care sunt indicate prin simbolul n.
Numărul de simboluri care se află în arcurile rotunde indică exact ce element sau elemente sunt alese. Folosind un anumit număr, calculați elementul de la începutul sau de la sfârșitul arborelui documentului, apoi selectați-l. Este ușor să calculați numărul de elemente de la începutul sau sfârșitul arborelui documentului și să selectați grupul sau repetarea acestora.
Vykoristannya de numere și soiuri în pseudo-clase
După cum sa menționat deja, căutarea unui anumit număr într-o pseudo-clasă calculează de la începutul sau de la sfârșitul arborelui documentului și selectează un element specific. De exemplu, selectorul li:nth-child(4) este al patrulea element din listă. Căutarea începe de la primul articol din listă și crește cu câte unul pentru fiecare articol din listă până când găsiți al patrulea element și îl selectați. Când este atribuit un anumit număr, acesta poate fi pozitiv.
Formatele pentru pseudoclase sunt an, an+b, an-b, n+b, -n+b și -an+b. Aceeași expresie poate fi tradusă și citită ca (a×n)±b. Variabila a denotă multiplicatorul din care se calculează elementele, iar variabila b indică semnele care vor începe și vor continua.
De exemplu, selectorul li:nth-child(3n) este semnificativ pentru al treilea element din listă. Acest virus este similar cu 3×0, 3×1, 3×2 etc. După cum puteți vedea, rezultatele acestui proces sunt alese de al treilea, al șaselea și al treilea element.
În plus, cuvintele cheie impar și par pot avea sens. Imediat ce il mirosi, selectezi, evident, elemente nepereche si nepereche. Dacă cuvintele cheie nu se potrivesc, tastați 2n+1 selectează toate elementele nepereche, iar tipul 2n selectează toate elementele pereche.
Selectorul li:nth-child(4n+7) alocă al patrulea element din listă începând de la al șaptelea element. Din nou, vicorul acestui virus este echivalent cu (4×0)+7, (4×1)+7, (4×2)+7 și așa mai departe. Rezultatele acestei viraza conduc la selectarea celui de-al șaptelea, al unsprezecelea, al cincisprezecelea și al patrulea element de piele.
Când argumentul n este selectat fără un număr în față, a este evaluat ca fiind egal cu 1. Selectorul li:nth-child(n+5) selectează următorul articol din listă, începând cu al cincilea, lăsând primele patru elemente. în listă neselectat. Expresia înseamnă (1×0)+5, (1×1)+5, (1×2)+5 etc.
Pentru a crea discursuri complexe, pot fi folosite numere negative. De exemplu, selectorul li:nth-child(6n-4) selectează al șaselea element din listă, începând cu -4, selectând un alt, al optulea, al paisprezecelea articol din listă și așa mai departe. Același selector li:nth-child(6n-4) poate fi scris și ca li:nth-child(6n+2) fără variabila negativă b.
Un argument negativ sau un argument negativ trebuie să fie însoțit de un argument pozitiv b. Dacă argumentului n i se trece o variabilă negativă a, atunci variabila b indică cât de mare va fi atingerea. De exemplu, selectorul li:nth-child(-3n+12) selectează al treilea element din lista cu primele douăsprezece elemente. Selectorul li:nth-child(-n+9) selectează primele nouă elemente din listă, cele rămase sunt modificate în -1 fără numărul specificat.
:al-al-lea-copil(n) și:al-al-lea-ultimul-copil(n)
Având o înțelegere generală a modului în care numerele și expresiile funcționează în pseudo-clase, să aruncăm o privire la pseudo-clasele originale, unde numerele și expresiile pot fi diferențiate, în primul rând :nth-child(n) și :nth-last- copil(n). Aceste pseudoclase sunt asemănătoare cu: primul copil și: ultimul copil, prin aceea că se uită și iau în considerare toate elementele din tată și selectează doar ultimul element. :nth-child(n) funcționează de la începutul arborelui documentelor, iar :nth-last-child(n) funcționează de la sfârșitul arborelui documentelor.
Pseudo-clasa vikorist: nth-child(n), haideti sa aruncam o privire la selectorul li:nth-child(3n). Aceasta înseamnă al treilea element din listă, deci rândurile 4 și 7 vor fi selectate.
Li:nth-child(3n) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
Selectați o altă expresie în pseudo-clasă: nth-child (n) oferă o altă selecție. Selectorul li:nth-child(2n+3) , de exemplu, selectează un alt element din listă, începând cu al treilea. Ca rezultat, articolele vor fi selectate în rândurile 4 și 6.
Li:nth-child(2n+3) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
Schimbarea diavolului este determinată, de data aceasta cu semnificații negative, dând o nouă alegere. Aici selectorul li:nth-child(-n+4) înseamnă că dacă elementele de sus din listă nu lasă alte elemente vizibile, rândurile de la 1 la 4 vor fi selectate.
Li:nth-child(-n+4) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
Adăugarea unui număr negativ înainte de argumentul n schimbă din nou selecția. Aici selectorul li:nth-child(-2n+5) desemnează un alt element din lista primelor cinci articole, astfel încât articolele din rândurile 2, 4 și 6 vor fi selectate.
Li:nth-child(-2n+5) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
Înlocuirea pseudoclasei :nth-child(n) cu :nth-last-child(n) schimbă direct fluxul, astfel încât fluxul începe acum la sfârșitul arborelui documentului. Selectorul li:nth-last-child(3n+2) , de exemplu, selectează al treilea element din listă, începând de la celălalt până la ultimul, căzând direct pe listă. Aici elementele din listă sunt selectate în rândurile 3 și 6.
Li:nth-ultimul-copil(3n+2) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
:nth-of-type(n) și:nth-of-type(n)
Pseudoclasele :nth-of-type(n) și :nth-last-of-type(n) sunt foarte asemănătoare cu :nth-child(n) și :nth-last-child(n) , în loc să ia ținând cont de piele elementul din mijlocul pseudoclasei :nth-of-type(n) și :nth-last-of-type(n) este protejat de elemente de tip propriu. De exemplu, atunci când editați paragrafe din pseudoclasele :nth-of-type(n) și :nth-last-of-type(n), omiteți orice titluri,
și diferite elemente, care nu sunt în paragrafe, în timp ce :nth-child(n) și :nth-last-child(n) vor ține cont de elementul skin, indiferent de tipul acestuia, selectându-le doar pe acelea dintre ele care corespund element în selectorul specificat. În plus, aceleași expresii posibile care pot fi găsite în :nth-child(n) și :nth-last-child(n) sunt disponibile și în pseudoclasele :nth-of-type(n) și :nth- ultimul de tip (n) .Pseudoclasa vikorist :nth-of-type(n) în selectorul p:nth-of-type(3n) putem identifica al treilea paragraf al tatălui, independent de alte elemente native din mijlocul tatălui. Aici paragrafele sunt selectate în rândurile 5 și 9.
P:nth-of-type(3n) (...)
...
Acest paragraf va fi șters
...
Acest paragraf va fi șters
Ca și în cazul pseudoclaselor :nth-child(n) și :nth-last-child(n) , principala diferență între :nth-of-type(n) și :nth-last-of-type(n) constă în faptul că acel :nth-of-type(n) respectă elementele de la începutul arborelui documentului, iar :nth-last-of-type(n) respectă elementele de la sfârșitul arborelui documentului.
Folosind pseudoclasa :nth-last-of-type(n), putem scrie un selector p:nth-last-of-type(2n+1) care selectează următorul paragraf de la sfârșitul elementului Tatălui, începând din paragraful rămas. Aici paragrafele sunt selectate în rândurile 4, 7 și 9.
P:nth-ultim-de-tip(2n+1) (...)
...
Acest paragraf va fi șters
...
Acest paragraf va fi șters
Acest paragraf va fi șters
Pseudo-clasă: țintă
Pseudo-clasa :target este utilizată pentru a stila elementele atunci când valoarea atributului id este potrivită cu eticheta de fragment URI. Un astfel de fragment din URI este recunoscut prin caracterul suplimentar (#) și orice îl urmează imediat. Adresele http://example.com/index.html#hello includ indicatorul salut. Dacă evitați valorile atributului id al elementului de pe pagină, de exemplu,
Pseudoclasa: gol
Pseudo-clasă: gol vă permite să selectați elemente care nu interferează cu copiii sau cu textul. Comentariile, instrucțiunile de procesare și textul gol nu sunt respectate de copii și nu sunt privite ca atare.
Wikoristannya pseudoclasă div:mijloc gol
fara copii, citeste textul. Vibrano inferior in randurile 2 si 3, fragmentele puturoase sunt absolut goale. Mintiți fără importanță pe cei care sunt diferiți Comentariu de răzbunare, nu respecți copilul, un astfel de rang este abandonat gol. Primul plasați textul, pe al treilea loc o curățare, iar pe locul rămas elementul copil , în acest fel, toate sunetele sunt oprite și pornite.Div: gol (...)
Buna ziua
Pseudoclasa: nu
Pseudoclasa :not(x) ia un argument și filtrează selecția care va fi subdivizată. Selectorul p:not(.intro) este o pseudo-clasă :nu este atribuită unui paragraf fără clasa intro. Elementul paragraf este alocat capului selectorului, urmat de pseudoclasa :not(x) . În mijlocul brațelor există un selector de bară transversală, care are clasa intro.
Mai jos selectoarele div:not(.awesome) și :not(div) pseudo-clasa vikorist :not(x) . Selectorul div:not(.awesome) înseamnă orice
fără clasa awesome, deoarece selectorul :not(div) înseamnă un element care nu este . Drept urmare, selectăm în rândul 1, precum și două diviziuni în rândurile 3 și 4. Un singur element neselectat Cu clasa minunată, unele părți ale acesteia depășesc granițele a două pseudo-clase.Div:not(.awesome) (...) :not(div) (...)
Acest div va fi numit
...
Această secțiune va avea loc Această secțiune va avea locExemplu din pseudo-clase
Număr
Gravets
Poziţie
Creştere
Vaga
8
Marco Belinelli
G
6-5
195
5
Carlos Boozer
F
6-9
266
...
Tabel ( chenar-restrângere: separat; margine-spațiere: 0; lățime: 100%; ) th, td ( padding: 6px 15px; ) th ( fundal: #42444e; culoare: #fff; text-align: left; ) tr :primul copil th:first-child ( chenar-sus-stânga-raza: 6px; ) tr:first-child th:last-child ( chenar-sus-dreapta-raza: 6px; ) td ( chenar-dreapta: 1px solid #c6c9cc; chenar-jos: 1px solid #c6c9cc; ) td:primul-copil (chenar-stânga: 1px solid #c6c9cc; ) copil td:primul-copil (chenar-jos-stânga-raza: 6px; ) tr: ultimul-copil td:ultimul-copil ( chenar-jos-dreapta-rază: 6px; )
Revizuirea pseudoclaselor fundul Nume Descriere
o legătură Pseudoclasa Posilan El alege mesajul, ca un koristuvach fără să se uite la el.
a: vizitat Pseudoclasa Posilan Selectează mesajul care a fost trimis de koristuvach.
a:hover Pseudoclasa diii Selectează un element atunci când utilizatorul mută cursorul.
a:activ Pseudoclasa diii Selectează un element dacă koristuvach îl activează.
concentrare Pseudoclasa diii Selectează un element dacă koristuvach l-a lovit cu un punct de respect.
intrare: activat Voi deveni o pseudo-clasă Selectează un element din opțiunea disponibilă.
intrare: dezactivat Voi deveni o pseudo-clasă Selectează un element din starea dezactivată cu atributul suplimentar dezactivat.
intrare: verificat Voi deveni o pseudo-clasă Ensignul alege sau peremikach, care este desemnat.
intrare: nedeterminat Voi deveni o pseudo-clasă El alege un stendard sau un remixer, care nu are semne sau semne, lipsindu-l într-o stare necunoscută.
li:primul copil Pseudoclasă structurală El alege primul element de la tatăl său.
li:ultimul-copil Pseudoclasă structurală El alege elementul rămas de la tatăl său.
div:copil-unic Pseudoclasă structurală Selectează un element de la tata.
p: primul de tip Pseudoclasă structurală El alege primul element de tipul său de la tatăl său.
p: ultimul de tip Pseudoclasă structurală El alege elementul rămas de tipul său de la tatăl său.
img:numai-de-tip Pseudoclasă structurală El alege un element de genul lui de la tatăl său.
li:nth-child(2n+3) Pseudoclasă structurală Selectează un element care reprezintă cantitatea sau expresia specificată, luând în considerare toate elementele de la începutul arborelui documentului.
li:nth-ultimul-copil(3n+2) Pseudoclasă structurală Selectează un element care reprezintă cantitatea sau valoarea specificată, inclusiv toate elementele de la sfârșitul arborelui documentului.
p:nth-of-type(3n) Pseudoclasă structurală Selectează un element care reprezintă un număr sau o expresie dată, în funcție de elementul din rădăcina arborelui documentului.
p:nth-ultim-de-tip (2n+1) Pseudoclasă structurală Selectează un element care reprezintă cantitatea sau tipul specificat, în funcție de tipul elementului de la sfârșitul arborelui documentului.
secțiune:țintă Pseudo-clasă: țintă Selectează un element a cărui valoare a atributului ID se potrivește cu indicatorul de fragment URI.
div:gol Pseudoclasa: gol Selectează un element care nu este potrivit pentru copii sau pentru text.
div:nu(.superb) Pseudoclasa: nu Selectează un element fără a furniza un argument declarat.
Pseudoelemente
Pseudo-elementele sunt elemente dinamice care nu există în arborele documentului și, atunci când sunt utilizate cu selectoare, pseudo-elementele oferă părți unice ale paginii care pot fi stilizate. Un punct important de remarcat este că doar un pseudo-element poate fi utilizat în selector la momentul potrivit.
Pseudo-elemente text
Primele pseudo-elemente implementate au fost pseudo-elemente text: prima literă și: prima linie. Pseudo-elementul :first-letter atribuie prima literă textului din mijlocul elementului, la fel cum :first-line atribuie primul rând textului din mijlocul elementului.
În demonstrație, primul rând al paragrafului cu clasa alfa primește o dimensiune mare a fontului și o culoare portocalie, ca și primul rând al paragrafului cu clasa bravo. Această selecție a fost compilată folosind pseudoclase de text: prima literă și: prima linie, evident.
Alfa:prima literă, .bravo:prima linie (culoare: #ff7b29; dimensiunea fontului: 18px; )
Lorem ipsum dolor...
Integer eget enim...
Demonstrarea pseudo-elementelor textului
Pseudo-elemente care sunt generate în schimb
Pseudo-elementele :before și :after creează noi pseudo-elemente mici în mijlocul elementului selectat. Cel mai adesea, aceste pseudo-elemente sunt folosite împotriva celor asociate cu puterea conținutului pentru a adăuga informații neimportante în lateral, dar acest lucru nu va fi întotdeauna cazul. Adăugarea acestor pseudo-elemente poate adăuga componente la interfața backend fără a fi nevoie de a caracteriza documentul cu elemente non-semantice.
Pseudo-elementul :before creează un pseudo-element înainte sau înaintea elementului selectat, în timp ce :after creează un pseudo-element după sau în spatele elementului selectat. Aceste pseudo-elemente sunt afișate introduse în mijlocul elementului selectat, și nu între ele. Pseudo-elementul inferior :after este folosit pentru a afișa valoarea atributului href în brațele rotunde de după post. Aceste informații sunt utile, dar, din păcate, nu orice browser acceptă aceste pseudo-elemente.
A:după (culoare: #9799a7; conținut: " (" attr(href) ")"; dimensiunea fontului: 11px; )
Shukati pe internet Aflați cum să creați un site web
Demonstrarea pseudo-elementelor care sunt generate în schimb
Pseudo-element::selectie
Pseudo-elementul ::selection denotă partea din document care este vizibilă pentru utilizator. Imaginile pot fi stilizate, dar numai folosind comenzile de culoare , fundal , culoare de fundal și umbră text. Warto indică faptul că strălucirea imaginii de fundal este ignorată. În același timp, puterea fundalului poate fi scurtată pentru a adăuga culoare, altfel orice imagine va fi ignorată.
Pliere dublă (:) și pliere dublă dublă (::)
Pseudo-elementul ::selection a fost adăugat la CSS3 prin încercarea de a adăuga pseudo-clase la pseudo-elemente folosind subdosarul care a fost adăugat la pseudo-elemente. Din fericire, majoritatea browserelor vor accepta semnificația elementelor duble simple sau subordonate în pseudo-elemente, astfel încât pseudo-elementul ::selection este întotdeauna susceptibil să înceapă cu un element dublu dublu.
Când vedeți oricare dintre textul demonstrativ de mai jos, fundalul devine portocaliu pentru pseudo-elementul ::selection. De asemenea, arătați respect față de ::-moz-selection. Prefixul Mozilla a fost adăugat pentru a se asigura Îți voi oferi cea mai bună atingere pentru toate browserele.
::-moz-selection ( fundal: #ff7b29; ) ::selection ( fundal: #ff7b29; )
Demonstrarea pseudo-elementelor
Săgeată ( fundal: #2db34a; culoare: #fff; afișare: bloc inline; înălțime: 30px; înălțime linie: 30px; umplutură: 0 12px; poziție: relativă; decor text: niciunul; ) săgeată:după ( conținut: ""; înălțime: 0; poziție: absolut; lățime: 0; ) .săgeată: înainte ( chenar-jos: 15px solid #2db34a; chenar-stânga: 15px solid transparent; #2db34a; stânga: -15px; ) .săgeată: după ( chenar-jos: 15px solid transparent; chenar-stânga: 15px solid #2db34a; chenar-sus: 15px solid transparent; dreapta: -15px; ) .arrow:hover ( fundal: #ff7b29; ) .arrow:hover:before ( chenar-jos: 15px solid #ff7b29; chenar-sus: 15px solid #ff7b29; ) .arrow:hover:after ( chenar-stânga: 15px solid #ff7b29; )
Suport pentru selectoare în browsere
La acel moment, pe măsură ce acești selectori demonstrează diferitele posibilități și viabilitatea de a lucra eficient, discursurile uimitoare de la Te voi ajuta cu CSS, acestea suferă uneori de un suport prost pentru browser. Înainte de a face acest lucru, deoarece acest lucru este mai critic, examinați selectoarele pe care doriți să le utilizați în cele mai populare browsere și apoi aflați despre cele care vi se potrivesc diferit.
CSS3.info dispune de instrumentul de testare a selectoarelor CSS3, care vă informează despre ce selectoare sunt acceptate de browser. De asemenea, este o idee proastă să verificați suportul pentru browser direct în cel nou.
Pe Smashing Magazine
- Înțelegerea: al n-lea copil Expresii de pseudoclasă pe SitePoint
- Îmblanzirea selectoarelor CSS avansate pe Smashing Magazine
Un selector face parte dintr-o regulă CSS care spune browserului ce element(e) din pagina web vor fi stilizate.
Termenul selector poate fi aplicat unui selector simplu, unui selector compus, unui selector complex sau unei liste de selectori.
Inainte de iertați selecționatorii apărea:
- selector de tip
- selector universal
- selectoare de atribute
- Selector ID
- selector de clasă
- pseudo-clasic
Selector CSS fundul Descriere CSS
.clasă
.clasa mea
Selectează toate elementele clasei myClass (class="myClass").
1
#id
#principal
Selectează un element cu identificatorul main (id="main").
1
*
Selectați elementele uscate.
2
element
span
Selectați toate elementele .
1
element, element
div, span
Selectați toate elementele și toate elementele .
1
[atribut]
Selectează toate elementele cu atributul titlu.
2
[atribut="valoare"]
Selectează toate elementele cu atributul titlu, a căror valoare este exact aceeași cu valorile specificate în selector (title="cost)").
!}!}
2
[atribut~="valoare"]
Selectează toate elementele cu atributul titlu, a căror valoare (orice loc) are o secvență (sub forma cuvântului din jur) „unu” (titlu=" unu și doi)").
!}!}
2
[atribut|="valoare"]
Selectați toate elementele cu atributul lang a căror valoare începe cu „ru”.
2
[atribut^="valoare"]
A
Vibrația elementului pielii cu atributul href, a cărui valoare începe cu „https”.
3
[atribut$="valoare"]
Selectează toate elementele cu un atribut src a căror valoare se termină în „.png” (src="some_img.png").
3
[atribut*="valoare"]
Selectează toate elementele cu atributul titlu, a căror valoare (orice loc) are o secvență (a se vedea cuvântul sau partea din jur) „unu” (titlu=" unu și doi)").
!}!}
3
Selector de depozit- aceasta este o succesiune de selectori simpli, care sunt separate prin combinatoare, adică un selector este urmat imediat de pași. Selectează un element care se potrivește tuturor selectoarelor simple care pot fi plasate. Un selector de tipul sau un selector universal, care este inclus înaintea selectorului de depozit, este vinovat că a fost deranjat în primul rând în această secvență. Într-un selector pliat, este permis un singur tip de selector sau un selector universal.
Span.className p.className1.className2#someId:hover
Selector pliabil- Aceasta este succesiunea selectoarelor, separate prin combinatoare.
Lista selectoarelor- selectoare tse, reasigurare prin coma.
Combinatori
Pentru a combina selectoare CSS simple, combinatoarele sunt folosite pentru a indica interacțiunile dintre selectoarele simple. Există o mulțime de combinatoare CSS2 diferite și un CSS3 suplimentar, iar dacă le folosiți, acestea vor schimba natura selectorului în sine.
Pseudo-clasic
O pseudo-clasă este un selector simplu care este folosit pentru a selecta ceva care nu poate fi selectat folosind alți selectori, dar poate fi selectat, dar nu într-un mod important.
Pseudo-clasă fundul Descriere CSS
:legătură
o legătură
Selectați toate evenimentele neprevăzute.
1
:vizitat
a: vizitat
Selectați toate intrările trimise.
1
:activ
a:activ
Trimitere activă prin vibrare.
1
:planare
a:hover
Vibrație trimisă atunci când cursorul este plasat peste urs.
1
: Concentrează-te
intrare: focus
Selectați elementul , ceea ce este în atenție.
2
:primul copil
p:primul copil
Vibrația elementului pielii Care este prima fiică a tatălui său.
2
:lang(limba)
p:lang(ro)
Vibrația elementului pielii Cu atributul lang, semnificația începe cu „ru”.
2
:primul de tip
p: primul de tip
Vibrația elementului pielii Care este primul dintre elemente
3
: ultimul de tip
p: ultimul de tip
Vibrația elementului pielii Ce rămâne din elemente
Elementul tatălui său.
3
:numai-de-tip
p:numai-de-tip
Vibrația elementului pielii Care este un singur element
Elementul tatălui său.
3
:singurul copil
p:copil-unic
Vibrația elementului pielii Care este un singur element copil al elementului tatălui său.
3
:nth-child(n)
p:nth-child(2)
Vibrația elementului pielii Elementul tatălui său.
3
: al-al-lea-ultimul-copil(n)
p:al-al-al-lea-ultimul-copil(2)
Vibrația elementului pielii Ce alt element copil din elementul tatălui său, respectând celălalt element copil.
3
:nth-of-type(n)
p:nth-of-type(2)
Vibrația elementului pielii Care este un alt element copil
Elementul tatălui său.
3
:nth-ultimul-de-tip(n)
p:nth-ultimul-de-tip(2)
Vibrația elementului pielii Care este un alt element copil
Elementul tatălui său, mirosind ca elementul fiică rămas.
3
3
:nu(selector)
:nu(p)
Selectați elemente uscate, în jurul elementului .
3
Pseudo-elemente
Un pseudo-element este un element virtual care nu apare explicit în arborele elementelor documentului. Pseudo-elementele sunt folosite pentru selectarea acelor părți ale unui element care nu pot fi asociate cu alți selectori, precum și pentru stilizarea nu a întregului element, ci a altor părți ale acestuia.
Ce este un selector CSS?- aceasta este o descriere a unui element sau a unui grup de elemente care indică browserului ce element să selecteze pentru stilul într-un anumit stil. Să aruncăm o privire la selectoarele CSS de bază.
1) .X
.topic-title (culoare-fond: galben; ) Selector CSS clasa X. Diferența dintre id și clasă este că aceeași clasă poate fi în mai multe elemente de pe pagină, iar id-ul este întotdeauna unic. Klasi varto vikoristovat pentru stasovannya același stil până la multe elemente.
- Crom
- Firefox
- Safari
- Operă
2) #X
#conținut (lățime: 960px; marjă: 0 automat; ) Selector CSS pentru id. Semnul din fața selectorului CSS X selectează un element cu id = X. Majoritatea stilurilor după id trebuie să-și amintească întotdeauna că este unic - numai un astfel de id este atribuit paginii. Este mai bine să folosiți selectoare pentru clase, combinații de clase sau nume de etichete. Tim, nu mai puțin, selectoare după ID sunt binevenite să fie folosite în testarea automată, deoarece permiteți reciproc să interacționeze cu ei înșiși element necesarȘi mă bucur că există doar unul dintre acestea pe pagină.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
3) *
* ( marja: 0; umplutură: 0; ) Selector CSS pentru toate elementele. Simbolul stea selectează toate elementele care se află pe pagină. Există mulți specialiști care folosesc această metodă pentru a reseta (zero) marjele și valorile de umplutură ale tuturor elementelor paginii. Tim nu este mai puțin, în practică este mai bine să nu funcționeze așa, deoarece acest selector CSS poate interfera foarte mult cu browserul căutând prin toate elementele de pe pagină.
Simbolul * poate fi modificat și pentru a afișa toate elementele copil:
#header * ( chenar: 5px gri solid; )
În acest exemplu, toate elementele copil (pad-urile) ale elementului #header sunt vizibile. Asigurați-vă că rețineți că acest selector este important pentru browser.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
4) X
a (culoare: verde; ) ol ( margine-stânga: 15px; ) Selector de tip CSS. Cum să selectezi toate elementele de același tip, deoarece nu miros nici id, nici clasă? Varto vikorystuvati selector CSS în spatele tipului de element. De exemplu, pentru a selecta toate listele ordonate de pe pagină, selectați ol (...) așa cum se arată mai sus.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
5) X Y
li a (greutatea fontului: bold; text-decor: niciuna; ) Selector de pad CSS sau Selector de elemente copil CSS Vikoristii sunt cel mai adesea abuzati. Pentru a fi învingător, este necesar să selectați elemente de tip cântat din multe elemente fiice. De exemplu, trebuie să vedeți toate mesajele care sunt în elementul li. În acest caz, utilizați acest selector. Vikoryst și șnururile unor astfel de selectoare, mai întâi întrebați-vă și puteți vikorist pentru o secvență și mai scurtă de selectoare pentru elementul vizibil.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
6) X+Y
div + p (familie de fonturi: „Helvetica Neue”, Arial, sans-serif; dimensiunea fontului: 18px; ) Selector de elemente compuse jefuiește numai un element de tip Y, care vine imediat după elementul X. Pentru acest tip de skin, paragraful vine imediat după elementul skin div, selectați un tip și o dimensiune specială a fontului.
Ce browsere sunt acceptate: - IE7+
- Firefox
- Crom
- Safari
- Crom
7) X > Y
#conținut > ul ( chenar: 1px verde continuu; ) Selector de pad CSS. Diferența dintre selectoarele X Y și X > Y este că selectorul este vizibil atunci când selectați doar elementele secundare din mijloc (selectând doar pad-urile directe). De exemplu:
- Element din listă
- Primul articol de pe listă
- Element din listă
- Element din listă
Selector CSS #content > ul select only ul, care este plasat direct pe blocul div cu id = "container". Nu alege ul, care este primul li. Acesta este un selector CSS puternic.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
8) X ~ Y
ol ~ p ( margine-stânga: 10px; ) Selector de elemente surori (shaling). mai puțin suvory nizh X + Y. Vіn selectați ca primul și alte elemente p, care merg după ol.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
a:link (culoare: verde; ) a:vizitat (culoare: gri; ) Pseudo-clasă: link Vikorist pentru a selecta toate mesajele pe care încă nu au fost făcute clic. Dacă este necesar să păstrați stilul de cânt înainte de a-l trimite, atunci pentru cine este vikory pseudo-clasa:vizitata.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
10) X
a(culoare:roșu;) Selector CSS din spatele atributului. Din ce aplicație selectați mesajele care afișează atributul titlu.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
11) X
a (culoare: galben; ) Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
12)X
a (culoare: #dfc11f; ) Steaua înseamnă că valoarea poate fi în atribut (în orice parte a atributului href). În acest fel, vor fi selecții și trimiteri de la https://www..stijit.. Până la toate trimiterile alese, va fi o culoare aurie.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
13) X
a ( fundal: url(path/to/external/icon.png) fără repetare; padding-left: 15px; ) Pe unele site-uri, mesajele care trimit către alte site-uri au pictograme mici cu săgeți pentru a arăta ce mesaje sunt trimise. Caratul „^” este simbolul pentru urechea rândului. Astfel, pentru a selecta toate etichetele al căror href începe cu http, trebuie să utilizați selectorul CSS cu karat, așa cum se arată în aplicație.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
14) X
a (culoare: verde; ) Aici expresia regulată și simbolul $ sunt folosite pentru a indica sfârșitul rândului. În a cărui aplicație putem vedea toate eforturile care se fac pe poze cu extensii.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
15) X
a (culoare: verde; ) Stam aici Selector CSS din spatele atributului koristuvach. Adăugăm atributul nostru puternic data-filetype skin-ului:
posilannya
Acum, cu ajutorul selectorului CSS, puteți selecta toate opțiunile care duc la imagini cu orice extensie.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
16) X
Tilde (~) vă permite să vedeți un singur atribut într-o listă de atribute separate printr-un spațiu. Puteți specifica atributul data-info, în care indicați numărul Cuvinte cheie prin poiană. În acest fel, puteți indica că mesajul a fost trimis către lumea exterioară și către imagine.
posilannya
În plus, putem selecta elemente cu combinațiile de atribute necesare:
/* Selectare element, atribut de date-info pentru orice valoare externă */ a (culoare: verde; ) /* Selectare element, atribut de date-info pentru orice imagine de valoare */ a ( chenar: 2px negru întrerupt; )
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
17) X:verificat
intrare: bifat ( chenar: 3px la început negru; ) Această pseudo-clasă vede doar elemente precum caseta de selectare sau butonul radio și numai dacă sunt deja în poziția desemnată.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
18) X: după
Pseudo-clase: înainte și după: chiar întuneric – creează conținut înainte și după elementul selectat.
Clearfix:după (conținut: ""; afișare: bloc; clar: ambele; vizibilitate: ascuns; dimensiunea fontului: 0; înălțimea: 0; ) .clearfix ( *afișare: bloc inline; _înălțimea: 1%; )
Aici pentru ajutor pentru pseudo-clasa: dupa blocul cu clasa. clearfix creează un rând gol și apoi îl șterge. Această abordare este abuzată, deoarece este imposibil să stingi puterea debordării: ascuns.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
19) X: hover
div:hover (culoare de fundal: rgba(11,77,130,0.5); ) Îngheață stilul de cântare pentru element atunci când cursorul mouse-ului este plasat peste. Versiuni vechi Internet Explorer zastosovuyut: hover până la posilan.
A:hover (chenar-jos: 1px punctat albastru; )
Ce browsere sunt acceptate: - IE6+ (În IE6 va sta doar până la sfârșit)
- Crom
- Firefox
- Safari
- Operă
20) X: nu (selector)
div:not(#conținut) (culoare: gri; ) Pseudo-clasă nu (încrucișată) Dacă, de exemplu, trebuie să selectați toate div-urile, în plus față de cele cu id="content" .
Folosind același principiu, puteți selecta toate elementele, cu excepția p:
*:nu(p) (culoare: albastru; )
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
21) X::pseudoElement
p::prima linie (greutatea fontului: bold; dimensiunea fontului: 24px; ) Pseudo-elementele pot fi modificate pentru a consolida stilurile până la fragmente de elemente - de exemplu, până la primul rând al unui paragraf sau prima literă a unui cuvânt. Se lipește doar de elementele blocului.
Selectați primul paragraf:
P::prima literă (familie de fonturi: cursiv; dimensiunea fontului: 30px; greutatea fontului: bold; padding-right: 1px; )
Selectați primul rând pentru paragraf:
P:prima linie (dimensiunea fontului: 28px; greutatea fontului: bold; )
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Operă
22) X: primul copil
ul li:primul copil (border-top: none; ) Pseudoclasa primul copil selectează prima parte a elementului Tatălui. Există adesea un wiki pentru a adăuga chenar la primul element din listă. Această pseudo-clasă este la propriu CSS 1.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari
- Opera 3.5+
- Android
23) X:ultimul-copil
ul > li:last-child (border-bottom: none; ) Pseudo-clasa ultimul copil selectează partea rămasă a elementului Tatălui Vіn apărând numai din CSS 3.
Ce browsere sunt acceptate: - IE9+ (IE8 acceptă primul copil, nu ultimul copil. Microsoft (c))
- Crom
- Firefox
- Safari
- Opera 9.6+
- Android
24) X: singur-copil
div p:copilul singur (culoare: verde; ) Pseudo-copil unic de clasă Vă permite să selectați acele elemente care sunt aceleași părți ale părinților voștri.
Ce browsere sunt acceptate: - Crom
- Firefox
- Safari 3.0+
- Opera 9.6+
- Android
25) X:nth-child(n)
li:nth-child(3) (culoare: negru; ) Selectează elementul copil cu numărul specificat în parametru. selector de al-lea copil acceptă un număr întreg ca parametru, deci trebuie luat de la 1, atunci. Dacă trebuie să selectați un articol diferit din listă, verificați li:nth-child(2) . Toate pseudo-clasele din vikoristannyam nth-child au apărut numai din CSS 3.
Ce browsere sunt acceptate: - Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
26) X:ultimul-copil(n)
li:nth-last-child(2) (culoare: roșu; ) Ce se întâmplă dacă aveți o listă mare de elemente în ul și trebuie să selectați al treilea element de la sfârșit? În loc să scrieți li:nth-child(109), puteți folosi vikory selector de tampoane rămase al-lea-ultimul-copil. Această metodă este aceeași cu prima, dar continuă de la capăt la capăt.
Ce browsere sunt acceptate: - Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
27) X:nth-of-type(n)
ul:nth-of-type(3) ( chenar: 1px punctat negru; ) Deoarece pe pagină există multe liste neordonate, este necesar să setați stilul la a treia dintre ele, care nu are un id unic, astfel încât să puteți utiliza nth-of-type.
Ce browsere sunt acceptate: - Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
28) X:a-n-ul-ultimul-tip(n)
ul:nth-last-of-type(3) ( chenar: 2px ridge blue; ) Pseudoclasa a n-a-ultimul-tip(n) atribuiri la alegerea celui de-al n-lea element al cântecului tip z kintsya.
Ce browsere sunt acceptate: - Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
29) X:numai-de-tip
li:numai-de-tip (greutatea fontului: bold; ) Pseudo-clasă numai de tip selectează elementele care se află între pereții elementului tatălui. De exemplu, puteți selecta toate uls, care se vor potrivi numai cu aceleași.
Ce browsere sunt acceptate: - Crom
- Firefox 3.5+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
30) X: primul de tip
ul:first-of-type > li:nth-child(3) ( stilul fontului: cursiv; ) Pseudo-clasă prima de tip selectează primul element de tipul dat
Ce browsere sunt acceptate: - Crom
- Firefox 3.5+
- Safari 3.1+
- Opera 9.5+
- Android 2.1+
- iOS 2.0+
Ultima actualizare: 21.04.2016
Atribuirea stilului începe de la selector. De exemplu:
Div( lățime:50px; /* lățime */ înălțime:50px; /* înălțime */ culoarea fundalului:roșu; /* culoarea fundalului */ margine: 10px; /* acces la alte elemente */ )
U la acest tip selector є div. O serie de selectoare definesc numele elementelor care sunt formatate, de exemplu, div, p, h2 etc. Când este selectat un astfel de selector, stilul va fi limitat la toate elementele similare acestui selector. Pentru ca stilul de cânt mai mult să fie consolidat la toate elementele
pe pagina web:
selectoare CSS
selectoare CSS
Există 3 elemente div pe pagină și toate vor fi stilate:
Klasi
Cu toate acestea, aceste elemente în sine necesită o varietate de stilizare. Și aici putem vikorystuvat clasa.
Pentru a atribui un selector unei clase CSS, puneți un punct în fața numelui clasei:
RedBlock (culoare de fundal: roșu; )
Numele clasei poate fi suficient. De exemplu, numele clasei este „redBlock”. Cu toate acestea, în numele clasei este permisă folosirea de litere, cifre, cratime și semne de accent, iar începutul numelui clasei este obligatoriu cu litere.
De asemenea, ajustați cu atenție registrul de nume: denumirile „articol” și „ARTICOL” reprezintă clase diferite.
După atribuirea unei clase, o putem atribui unui element folosind atributul de clasă suplimentar. De exemplu:
Ceea ce este semnificativ este numărul de clase:
CSS elegant
CSS elegant
Identificatori
Pentru a identifica elemente unice pe pagina web, sunt identificați identificatori care sunt alocați unor atribute suplimentare de id. De exemplu, pe pagină puteți avea un bloc de cap sau un antet:
Atribuirea stilurilor pentru identificatori este similară cu alocarea claselor, cu excepția faptului că simbolul hash # este folosit în locul punctului:
ID-uri CSS
Antetul site-ului
Locul principal
Cu toate acestea, rețineți că identificatorii se referă în mare parte la structura paginii web și mai puțin la stilizare. Pentru stilizare, este important să folosiți diferite clase, identificatori mai mici.
Selector universal
Numărul de selectatori de etichete, clase și identificatori în css este, de asemenea, numit selector universal, care este reprezentat de semnul stelar (*). Se aplică stiluri tuturor elementelor de pe pagina html:
*(culoarea fundalului: roșu; )
Stilizarea unui grup de selectoare
Unele stiluri de cântece sunt limitate la o întreagă gamă de selectoare. De exemplu, vrem să acoperim toate rubricile de sub fotoliu. În acest caz, putem converti selectoarele tuturor elementelor prin comă:
selectoare CSS
CSS3
Selector
Grup de selecție
Textul real...
Un grup de selectori poate include atât selectori de etichete, cât și selectori de clase și identificatori, de exemplu:
H1, #header, .redBlock(culoare: roșu; )
Tse tsikavo:
Mai jos sunt titlurile, rândurile 3 și 5.
Articolul h2 (...)
...
Acest titlu va fi discutat
Acest titlu va fi discutat
Selector direct pentru copii
Autocolantele selectoare trebuie să meargă atât de departe, alegând mai mult decât mi-aș dori. În unele cazuri, pot exista doar copii direcți ai elementului Patrie, dar nu o copie separată a elementului de investiție adânc în mijlocul strămoșului. Această opțiune poate avea un selector copil direct prin plasarea unui semn mai mare decât (>) între elementul părinte și elementul secundar al selectorului.
De exemplu, articolul > p este un selector direct de copil al unui singur element
Fii situat direct în mijlocul elementului
Mai jos, paragraful de pe rândul 3, cu o margine dreaptă a tatălui tău
Articolul > p (...)
Acest paragraf va fi șters
Selectori contestați
A ști cum să selectezi elementele copil este foarte dificil și tinde să se umple des. Cu toate acestea, elementele controversate, cum ar fi elementele care pot avea un strămoș viu, ar putea fi, de asemenea, nevoie să fie selectate. O astfel de selecție poate fi făcută folosind selectoare arbitrare suplimentare și selectoare secundare.
Selector de dispute Zagalny
Selectorul nativ original vă permite să selectați elemente care vor fi selectate pe baza elementelor lor native, cum ar fi cele care au același tată vechi. Mirosurile sunt create în spatele simbolului tildei (~) între cele două elemente din mijlocul selectorului. Primul element înseamnă că un alt element poate intra în conflict cu el, iar același tată este de vină pentru ambele.
Selector h2~p - acesta este un selector ascuns, caută elemente
Ce urmează după orice elemente
Acesta este tatăl lui. Elementul Shchob
Dacă vorbim, putem merge după orice element
.
Apar paragrafele din rândurile 5 și 9, fragmente de duhoare merg după titlul din arborele documentului și pot fi același tată care se află la antetul original.
H2 ~ p(...)
...
Acest paragraf va fi șters
Acest paragraf va fi șters
Selectori de țară
Uneori este posibil să aveți nevoie de puțin mai mult control, inclusiv abilitatea de a selecta un element complementar care urmează direct după alt element complementar. Selectorul secundar selectează doar elemente controversate care urmează direct unui alt element controversat. În locul simbolului tilde, așa cum este cazul selectorului complementar, selectorul complementar înlocuiește simbolul plus (+) între două elemente din selector. Din nou, primul element înseamnă că celălalt element este vinovat că îl urmărește direct pe următorul și este controversat, iar ambele elemente sunt vinovate de același tată.
Să aruncăm o privire la selectorul de judecători h2 + p. Vor fi colectate mai puține elemente
Cei care merg direct după elemente
. În ambele, poate exista și unul și același element al Tatălui.
Paragraful de pe rândul 5 este selectat deoarece urmează imediat titlul său original și au un element puternic al tatălui.
H2 + p(...)
...
Acest paragraf va fi șters
Exemplu de selectoare auxiliare
Introducere ( afișare: niciuna; ) etichetă, ul ( chenar: 1 px solid #cecfd5; chenar-radius: 6 px; ) etichetă ( culoare: #0087cc; cursor: indicator; afișare: bloc inline; dimensiune font: 18 px; umplutură: 5px 9px; tranziție: toate .15s ease; ) label:hover (culoare: #ff7b29; ); ) nav ( înălțime maximă: 0; depășire: ascuns; tranziție: toate .15 s ușurință; ) input: verificat ~ nav ( înălțime maximă: 500 px; ) ul ( stil listă: niciunul; marjă: 8 px 0 0 0; umplutură : 0; lățime: 100 px; ) li ( chenar-jos: 1px solid #cecfd5; ) li:last-child ( chenar-jos: 0; ) a ( culoare: #0087cc; text-decor: niciunul; ) a:hover (culoare: #ff7b29; )
Selectori de atribute
Aceste tipuri de selectoare pot fi definite și ca selectoare de atribute, în care un element este selectat pe baza unei clase sau a valorii id. Acești selectori de atribute de clasă și id sunt folosiți pe scară largă și apăsați mai tare, dar deloc. Alți selectori de atribute au apărut în Pe lângă stâncile rămase, zokrema, a creat o bandă grozavă în avans din CSS3. Elementele pot fi selectate acum în funcție de ce atribut este și ce valoare conține.
Selector de vizibilitate a atributelor
Primul selector de atribute selectează un element pe baza căruia se află atributul, indiferent de valoarea sa reală. Pentru a selecta un element pe baza atributului său, faceți clic pe numele atributului în brate patrate() la selector. Brațele pătrate pot veni după orice tip sau clasă de selector, în funcție de nivelul de specificitate cerut.
A (...)
Selector de atribute =
Pentru a identifica un element cu aceleași și precis specificate valori, puteți folosi același selector ca și înainte, de data aceasta în mijlocul brațelor pătrate după numele atributului, includeți casetele cu valori. În mijlocul brațelor pătrate se află numele atributului, care vine după semn, exact (=), iar în mijlocul picioarelor este scrisă valoarea atributului.
A (...)
Selector de atribute *=
Dacă dorim să găsim un element pe baza unei părți din valoarea atributului, mai degrabă decât pe o căutare exactă, putem folosi simbolul stea (*) în brațele pătrate ale selectorului. Steaua poate apărea imediat după numele atributului, chiar înainte de semnul de rang. Aceasta înseamnă că în acest moment valoarea poate apărea sau dispărea din atributul evaluat.
A (...)
Selector de atribute ^=
Pe lângă selectarea unui element în funcție de valoarea atributului care apare în text, puteți selecta și un element care se bazează pe cu ce începe valoarea atributului. Utilizarea unui simbol circumflex (^) în brațele pătrate ale selectorului dintre numele atributului și un semn egal înseamnă că valoarea atributului poate începe cu textul atribuit.
A (...)
...
Selector de atribute $=
Lângă selectorul frontal este selectorul de atribute, unde valorile se termină cu text. În loc de simbolul ^, există un semn dolar ($) la brațele pătrate ale selectorului între numele atributelor și semnul egal. Utilizarea semnului dolar înseamnă că valoarea atributului se poate termina cu textul specificat.
A (...)
Selector de atribute ~=
Unele valori ale atributelor pot fi separate prin trecerea unui tip la un moment dat, în care numai unul după altul este potrivit pentru a crea o selecție. În acest caz, simbolul tilde (~) din brațele selectorului pătrat între numele atributului și semnul egal indică valorile atributelor separate prin spații, în care un cuvânt corespunde exact valorii atribuite.
A (...)
Selector de atribute | =
Atunci când valorile atributelor sunt separate prin cratime și nu prin spații, simbolul liniei verticale (|) în brațele selectorului pătrat poate apărea între numele atributului și simbolul de egalitate. O linie verticală înseamnă că valorile atributului pot fi separate printr-o cratimă, iar cuvintele atribut încep cu valoarea atribuită.
A (...)
Aplicarea selectoarelor de atribute
Ul ( stil-listă: niciunul; margine: 0; umplutură: 0; ) a ( poziția fundalului: 0 50%; repetare fundal: fără repetare; culoare: #0087cc; padding-left: 22px; text-decor: nici unul; ) a:hover (culoare: #ff7b29; ) a ( imagine de fundal: url("images/pdf.png"); ) a ( imagine de fundal: url("images/doc.png"); ) a ( imagine de fundal: url("imagini/imagine.png"); ) a ( imagine de fundal: url ("imagini/audio.png"); ) a ( imagine de fundal: url("imagine/video.png" );
| fundul | Nume | Descriere |
|---|---|---|
| A | Selector de vizibilitate a atributelor | Selectează un element care este atributul prezent. |
| A | Selector de atribute = | Selectează un element în care valoarea acestui atribut se potrivește exact cu cea atribuită. |
| A | Selector de atribute *= | Selectează un element a cărui valoare de atribut conține o instanță atribuită textului. |
| A | Selector de atribute ^= | Selectează un element a cărui valoare pentru acest atribut începe cu cea atribuită textului. |
| A | Selector de atribute $= | Selectează un element dacă valoarea acestui atribut se termină cu textul specificat. |
| A | Selector de atribute ~= | Selectează un element în care valorile acestui atribut sunt separate prin spații și se potrivesc exact cu cuvântul specificat. |
| A | Selector de atribute | = | Selectează un element în care valoarea acestui atribut este separată printr-o cratimă și începe cu cuvântul specificat. |
Pseudoclase
Pseudo-clasele sunt similare cu clasele originale din HTML, cu toate acestea nu sunt strict definite, ci sunt create dinamic ca urmare a modificărilor în structura documentului. Cea mai mare extensie a pseudo-clasei, și poate ați mai studiat-o, este: hover. Vă rugăm să rețineți că această pseudo-clasă începe cu un dublu (:), ca toate celelalte pseudo-clase.
posilan pseudoclasic
Principalele pseudo-clase includ două pseudo-clase care se înfășoară una în jurul celeilalte. Aceste pseudoclase :link și :visited și snch indică faptul că mesajul a fost trimis sau nu a fost livrat. Pentru a seta stilul de trimitere, care nu a fost încă publicat, grupul include pseudo-clasa :link, iar pseudo-clasa :visited specifică stilul de trimitere, care a fost deja publicat pe baza istoricului lor.
A:link (...) a:vizitat (...)
Pseudoclase dii koristuvacha
Un element poate fi bazat dinamic pe diferite pseudo-clase, cum ar fi :hover, :active și :focus. Pseudo-clasă:hover stagnează la element, dacă utilizatorul trece cursorul peste element, cel mai adesea vikoristavatsya cu mesajele. Pseudoclasă: activ stagnează la element, dacă utilizatorul aduce elementul la masă, de exemplu, atunci când este apăsat pe unul nou. Eu, să zicem, pseudo-clasa: focusul este setat pe element, dacă utilizatorul a creat elementul din punctul de vedere al lateral, folosind adesea tasta Tab suplimentară, deplasându-se de la un element la altul.
A:hover (...) a:activ (...) a:focus (...)
Pseudoclasele vor deveni o interfață
În mod similar, se speră că există și pseudoclase asociate cu starea elementelor interfață koristuvach, zokrema, în mijlocul formelor. Aceste pseudo-clase includ: activat,: dezactivat,: verificat și: nedeterminat.
Pseudoclasa :enabled selectează câmpurile care sunt activate și disponibile pentru motorul de căutare, iar pseudoclasa :disabled selectează câmpurile care au atributul dezactivat atașat. Multe browsere tind să întunece astfel de câmpuri blocate pentru a informa utilizatorii despre cele că câmpul nu este disponibil pentru interacțiune; stilul lor poate fi ajustat prin pseudo-clasa: disabled.
Intrare: activat (...) intrare: dezactivat (...)
Celelalte două elemente ale interfeței, pseudoclasele :checked și :indeterminate, sunt cuprinse în proporții și alternanțe. Pseudo-clasă :checked selectează proporții sau variabile, care, după cum puteți vedea, sunt desemnate. Dacă steagul i se cere să remixeze nu mărci și nu selecții, el trăiește într-o stare nemarcată, pentru care pseudoclasa :indeterminate poate fi folosită pentru a viza elemente similare.
Intrare: verificat (...) intrare: nedeterminat (...)
Pseudoclase de structură și poziție
Un număr de pseudo-clase sunt atribuite structurii și poziției pe baza elementelor situate în arborele documentului. Aceste pseudo-clase vin în diferite forme și dimensiuni, skin-urile din care își asigură funcția unică. Unele pseudo-clase au apărut chiar mai devreme decât altele, iar CSS3 a adus o mulțime de beneficii cadran nou pseudoclase pe lângă cele principale.
:primul-copil, :ultimul-copil și:unicul-copil
Primele pseudoclase structurale, pe care mai degrabă ar trebui să le dai vina pentru tot, sunt: primul-copil,: ultimul-copil și: singur-copil. Pseudoclasa :first-child alege un element, deoarece este primul copil din tată, la fel și pseudoclasa :last-child alege un element, deoarece rămâne cu tatăl. Aceste pseudo-clase sunt ideale pentru selectarea primului sau ultimului element din listă. În plus, singurul copil selectează un element, deoarece este un singur element în tată. Ca alternativă, pseudoclasa :only-child ar putea fi scrisă ca :first-child:last-child , dar :only-child este mai puțin specific.
Aici selectorul li:first-child selectează primul element din listă, în timp ce li:last-child selectează ultimul element din listă, rândurile 2 și 10 sunt selectate în acest fel. Selectorul div:only-child ghicește
Li:primul copil (...) li:last-child (...) div:only-child (...)
- Acest punct va fi discutat
-
Acest div va fi numit
-
......
- Acest punct va fi discutat
:primul-de-tip, :ultimul-de-tip și:doar-de-tip
Descoperirea primului copil, rămas și singur al tatălui, este foarte dificilă și adesea doar necesară. Cu toate acestea, uneori doriți să selectați doar primul copil, rămas sau singur, al elementului de tip cântător. De exemplu, poate doriți să selectați fie primul, fie ultimul paragraf din mijlocul articolului sau, poate, fără imaginea din articol. Din fericire, pseudoclasele ajută în acest sens: first-of-type,: last-of-type și: only-of-type.
Pseudo-clasa :first-of-type selectează primul element de tipul său în mijlocul tatălui, la fel și pseudo-clasa :last-of-type selectează elementul rămas din tipul său în mijlocul tatălui. Pseudo-clasa: only-of-type alege un element care este singurul de acest tip din Patria.
În următoarele pseudoclase p:first-of-type și p:last-of-type, selectați, evident, primul și ultimul paragraf din articol, indiferent dacă sunt primii sau ultimii copii din articol. Rândurile 3 și 6 sunt selectate de selectori. Selectorul img:only-of-type înseamnă că imaginile din rândul 5 sunt singurele imagini care apar în statistici.
P:primul-de-tip (...) p:ultimul-de-tip (...) img:numai-de-tip (...)
Acest paragraf va fi șters Acest paragraf va fi șters...
...
Există o serie de pseudo-clase de structură și condiții pentru selectarea elementelor pe baza numerelor sau a tipurilor de algebră. Aceste pseudoclase includ :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) și :nth-last-of-type(n) . Toate aceste pseudoclase unice încep cu nth și formează numere în mijlocul brațelor rotunde, care sunt indicate prin simbolul n.
Numărul de simboluri care se află în arcurile rotunde indică exact ce element sau elemente sunt alese. Folosind un anumit număr, calculați elementul de la începutul sau de la sfârșitul arborelui documentului, apoi selectați-l. Este ușor să calculați numărul de elemente de la începutul sau sfârșitul arborelui documentului și să selectați grupul sau repetarea acestora.
Vykoristannya de numere și soiuri în pseudo-clase
După cum sa menționat deja, căutarea unui anumit număr într-o pseudo-clasă calculează de la începutul sau de la sfârșitul arborelui documentului și selectează un element specific. De exemplu, selectorul li:nth-child(4) este al patrulea element din listă. Căutarea începe de la primul articol din listă și crește cu câte unul pentru fiecare articol din listă până când găsiți al patrulea element și îl selectați. Când este atribuit un anumit număr, acesta poate fi pozitiv.
Formatele pentru pseudoclase sunt an, an+b, an-b, n+b, -n+b și -an+b. Aceeași expresie poate fi tradusă și citită ca (a×n)±b. Variabila a denotă multiplicatorul din care se calculează elementele, iar variabila b indică semnele care vor începe și vor continua.
De exemplu, selectorul li:nth-child(3n) este semnificativ pentru al treilea element din listă. Acest virus este similar cu 3×0, 3×1, 3×2 etc. După cum puteți vedea, rezultatele acestui proces sunt alese de al treilea, al șaselea și al treilea element.
În plus, cuvintele cheie impar și par pot avea sens. Imediat ce il mirosi, selectezi, evident, elemente nepereche si nepereche. Dacă cuvintele cheie nu se potrivesc, tastați 2n+1 selectează toate elementele nepereche, iar tipul 2n selectează toate elementele pereche.
Selectorul li:nth-child(4n+7) alocă al patrulea element din listă începând de la al șaptelea element. Din nou, vicorul acestui virus este echivalent cu (4×0)+7, (4×1)+7, (4×2)+7 și așa mai departe. Rezultatele acestei viraza conduc la selectarea celui de-al șaptelea, al unsprezecelea, al cincisprezecelea și al patrulea element de piele.
Când argumentul n este selectat fără un număr în față, a este evaluat ca fiind egal cu 1. Selectorul li:nth-child(n+5) selectează următorul articol din listă, începând cu al cincilea, lăsând primele patru elemente. în listă neselectat. Expresia înseamnă (1×0)+5, (1×1)+5, (1×2)+5 etc.
Pentru a crea discursuri complexe, pot fi folosite numere negative. De exemplu, selectorul li:nth-child(6n-4) selectează al șaselea element din listă, începând cu -4, selectând un alt, al optulea, al paisprezecelea articol din listă și așa mai departe. Același selector li:nth-child(6n-4) poate fi scris și ca li:nth-child(6n+2) fără variabila negativă b.
Un argument negativ sau un argument negativ trebuie să fie însoțit de un argument pozitiv b. Dacă argumentului n i se trece o variabilă negativă a, atunci variabila b indică cât de mare va fi atingerea. De exemplu, selectorul li:nth-child(-3n+12) selectează al treilea element din lista cu primele douăsprezece elemente. Selectorul li:nth-child(-n+9) selectează primele nouă elemente din listă, cele rămase sunt modificate în -1 fără numărul specificat.
:al-al-lea-copil(n) și:al-al-lea-ultimul-copil(n)
Având o înțelegere generală a modului în care numerele și expresiile funcționează în pseudo-clase, să aruncăm o privire la pseudo-clasele originale, unde numerele și expresiile pot fi diferențiate, în primul rând :nth-child(n) și :nth-last- copil(n). Aceste pseudoclase sunt asemănătoare cu: primul copil și: ultimul copil, prin aceea că se uită și iau în considerare toate elementele din tată și selectează doar ultimul element. :nth-child(n) funcționează de la începutul arborelui documentelor, iar :nth-last-child(n) funcționează de la sfârșitul arborelui documentelor.
Pseudo-clasa vikorist: nth-child(n), haideti sa aruncam o privire la selectorul li:nth-child(3n). Aceasta înseamnă al treilea element din listă, deci rândurile 4 și 7 vor fi selectate.
Li:nth-child(3n) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
Selectați o altă expresie în pseudo-clasă: nth-child (n) oferă o altă selecție. Selectorul li:nth-child(2n+3) , de exemplu, selectează un alt element din listă, începând cu al treilea. Ca rezultat, articolele vor fi selectate în rândurile 4 și 6.
Li:nth-child(2n+3) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
Schimbarea diavolului este determinată, de data aceasta cu semnificații negative, dând o nouă alegere. Aici selectorul li:nth-child(-n+4) înseamnă că dacă elementele de sus din listă nu lasă alte elemente vizibile, rândurile de la 1 la 4 vor fi selectate.
Li:nth-child(-n+4) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
Adăugarea unui număr negativ înainte de argumentul n schimbă din nou selecția. Aici selectorul li:nth-child(-2n+5) desemnează un alt element din lista primelor cinci articole, astfel încât articolele din rândurile 2, 4 și 6 vor fi selectate.
Li:nth-child(-2n+5) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
- Acest punct va fi discutat
Înlocuirea pseudoclasei :nth-child(n) cu :nth-last-child(n) schimbă direct fluxul, astfel încât fluxul începe acum la sfârșitul arborelui documentului. Selectorul li:nth-last-child(3n+2) , de exemplu, selectează al treilea element din listă, începând de la celălalt până la ultimul, căzând direct pe listă. Aici elementele din listă sunt selectate în rândurile 3 și 6.
Li:nth-ultimul-copil(3n+2) (...)
- Acest punct va fi discutat
- Acest punct va fi discutat
:nth-of-type(n) și:nth-of-type(n)
Pseudoclasele :nth-of-type(n) și :nth-last-of-type(n) sunt foarte asemănătoare cu :nth-child(n) și :nth-last-child(n) , în loc să ia ținând cont de piele elementul din mijlocul pseudoclasei :nth-of-type(n) și :nth-last-of-type(n) este protejat de elemente de tip propriu. De exemplu, atunci când editați paragrafe din pseudoclasele :nth-of-type(n) și :nth-last-of-type(n), omiteți orice titluri,
Pseudoclasa vikorist :nth-of-type(n) în selectorul p:nth-of-type(3n) putem identifica al treilea paragraf al tatălui, independent de alte elemente native din mijlocul tatălui. Aici paragrafele sunt selectate în rândurile 5 și 9.
P:nth-of-type(3n) (...)
Acest paragraf va fi șters Acest paragraf va fi șters...
...
Ca și în cazul pseudoclaselor :nth-child(n) și :nth-last-child(n) , principala diferență între :nth-of-type(n) și :nth-last-of-type(n) constă în faptul că acel :nth-of-type(n) respectă elementele de la începutul arborelui documentului, iar :nth-last-of-type(n) respectă elementele de la sfârșitul arborelui documentului.
Folosind pseudoclasa :nth-last-of-type(n), putem scrie un selector p:nth-last-of-type(2n+1) care selectează următorul paragraf de la sfârșitul elementului Tatălui, începând din paragraful rămas. Aici paragrafele sunt selectate în rândurile 4, 7 și 9.
P:nth-ultim-de-tip(2n+1) (...)
Acest paragraf va fi șters Acest paragraf va fi șters Acest paragraf va fi șters...
...
Pseudo-clasă: țintă
Pseudo-clasa :target este utilizată pentru a stila elementele atunci când valoarea atributului id este potrivită cu eticheta de fragment URI. Un astfel de fragment din URI este recunoscut prin caracterul suplimentar (#) și orice îl urmează imediat. Adresele http://example.com/index.html#hello includ indicatorul salut. Dacă evitați valorile atributului id al elementului de pe pagină, de exemplu,
Pseudoclasa: gol
Pseudo-clasă: gol vă permite să selectați elemente care nu interferează cu copiii sau cu textul. Comentariile, instrucțiunile de procesare și textul gol nu sunt respectate de copii și nu sunt privite ca atare.
Wikoristannya pseudoclasă div:mijloc gol
Div: gol (...)
Pseudoclasa: nu
Pseudoclasa :not(x) ia un argument și filtrează selecția care va fi subdivizată. Selectorul p:not(.intro) este o pseudo-clasă :nu este atribuită unui paragraf fără clasa intro. Elementul paragraf este alocat capului selectorului, urmat de pseudoclasa :not(x) . În mijlocul brațelor există un selector de bară transversală, care are clasa intro.
Mai jos selectoarele div:not(.awesome) și :not(div) pseudo-clasa vikorist :not(x) . Selectorul div:not(.awesome) înseamnă orice
Div:not(.awesome) (...) :not(div) (...)
Exemplu din pseudo-clase
| Număr | Gravets | Poziţie | Creştere | Vaga |
|---|---|---|---|---|
| 8 | Marco Belinelli | G | 6-5 | 195 |
| 5 | Carlos Boozer | F | 6-9 | 266 |
Tabel ( chenar-restrângere: separat; margine-spațiere: 0; lățime: 100%; ) th, td ( padding: 6px 15px; ) th ( fundal: #42444e; culoare: #fff; text-align: left; ) tr :primul copil th:first-child ( chenar-sus-stânga-raza: 6px; ) tr:first-child th:last-child ( chenar-sus-dreapta-raza: 6px; ) td ( chenar-dreapta: 1px solid #c6c9cc; chenar-jos: 1px solid #c6c9cc; ) td:primul-copil (chenar-stânga: 1px solid #c6c9cc; ) copil td:primul-copil (chenar-jos-stânga-raza: 6px; ) tr: ultimul-copil td:ultimul-copil ( chenar-jos-dreapta-rază: 6px; )
| fundul | Nume | Descriere |
|---|---|---|
| o legătură | Pseudoclasa Posilan | El alege mesajul, ca un koristuvach fără să se uite la el. |
| a: vizitat | Pseudoclasa Posilan | Selectează mesajul care a fost trimis de koristuvach. |
| a:hover | Pseudoclasa diii | Selectează un element atunci când utilizatorul mută cursorul. |
| a:activ | Pseudoclasa diii | Selectează un element dacă koristuvach îl activează. |
| concentrare | Pseudoclasa diii | Selectează un element dacă koristuvach l-a lovit cu un punct de respect. |
| intrare: activat | Voi deveni o pseudo-clasă | Selectează un element din opțiunea disponibilă. |
| intrare: dezactivat | Voi deveni o pseudo-clasă | Selectează un element din starea dezactivată cu atributul suplimentar dezactivat. |
| intrare: verificat | Voi deveni o pseudo-clasă | Ensignul alege sau peremikach, care este desemnat. |
| intrare: nedeterminat | Voi deveni o pseudo-clasă | El alege un stendard sau un remixer, care nu are semne sau semne, lipsindu-l într-o stare necunoscută. |
| li:primul copil | Pseudoclasă structurală | El alege primul element de la tatăl său. |
| li:ultimul-copil | Pseudoclasă structurală | El alege elementul rămas de la tatăl său. |
| div:copil-unic | Pseudoclasă structurală | Selectează un element de la tata. |
| p: primul de tip | Pseudoclasă structurală | El alege primul element de tipul său de la tatăl său. |
| p: ultimul de tip | Pseudoclasă structurală | El alege elementul rămas de tipul său de la tatăl său. |
| img:numai-de-tip | Pseudoclasă structurală | El alege un element de genul lui de la tatăl său. |
| li:nth-child(2n+3) | Pseudoclasă structurală | Selectează un element care reprezintă cantitatea sau expresia specificată, luând în considerare toate elementele de la începutul arborelui documentului. |
| li:nth-ultimul-copil(3n+2) | Pseudoclasă structurală | Selectează un element care reprezintă cantitatea sau valoarea specificată, inclusiv toate elementele de la sfârșitul arborelui documentului. |
| p:nth-of-type(3n) | Pseudoclasă structurală | Selectează un element care reprezintă un număr sau o expresie dată, în funcție de elementul din rădăcina arborelui documentului. |
| p:nth-ultim-de-tip (2n+1) | Pseudoclasă structurală | Selectează un element care reprezintă cantitatea sau tipul specificat, în funcție de tipul elementului de la sfârșitul arborelui documentului. |
| secțiune:țintă | Pseudo-clasă: țintă | Selectează un element a cărui valoare a atributului ID se potrivește cu indicatorul de fragment URI. |
| div:gol | Pseudoclasa: gol | Selectează un element care nu este potrivit pentru copii sau pentru text. |
| div:nu(.superb) | Pseudoclasa: nu | Selectează un element fără a furniza un argument declarat. |
Pseudoelemente
Pseudo-elementele sunt elemente dinamice care nu există în arborele documentului și, atunci când sunt utilizate cu selectoare, pseudo-elementele oferă părți unice ale paginii care pot fi stilizate. Un punct important de remarcat este că doar un pseudo-element poate fi utilizat în selector la momentul potrivit.
Pseudo-elemente text
Primele pseudo-elemente implementate au fost pseudo-elemente text: prima literă și: prima linie. Pseudo-elementul :first-letter atribuie prima literă textului din mijlocul elementului, la fel cum :first-line atribuie primul rând textului din mijlocul elementului.
În demonstrație, primul rând al paragrafului cu clasa alfa primește o dimensiune mare a fontului și o culoare portocalie, ca și primul rând al paragrafului cu clasa bravo. Această selecție a fost compilată folosind pseudoclase de text: prima literă și: prima linie, evident.
Alfa:prima literă, .bravo:prima linie (culoare: #ff7b29; dimensiunea fontului: 18px; )
Lorem ipsum dolor...
Integer eget enim...
Demonstrarea pseudo-elementelor textului
Pseudo-elemente care sunt generate în schimb
Pseudo-elementele :before și :after creează noi pseudo-elemente mici în mijlocul elementului selectat. Cel mai adesea, aceste pseudo-elemente sunt folosite împotriva celor asociate cu puterea conținutului pentru a adăuga informații neimportante în lateral, dar acest lucru nu va fi întotdeauna cazul. Adăugarea acestor pseudo-elemente poate adăuga componente la interfața backend fără a fi nevoie de a caracteriza documentul cu elemente non-semantice.
Pseudo-elementul :before creează un pseudo-element înainte sau înaintea elementului selectat, în timp ce :after creează un pseudo-element după sau în spatele elementului selectat. Aceste pseudo-elemente sunt afișate introduse în mijlocul elementului selectat, și nu între ele. Pseudo-elementul inferior :after este folosit pentru a afișa valoarea atributului href în brațele rotunde de după post. Aceste informații sunt utile, dar, din păcate, nu orice browser acceptă aceste pseudo-elemente.
A:după (culoare: #9799a7; conținut: " (" attr(href) ")"; dimensiunea fontului: 11px; )
Shukati pe internet Aflați cum să creați un site web
Demonstrarea pseudo-elementelor care sunt generate în schimb
Pseudo-element::selectie
Pseudo-elementul ::selection denotă partea din document care este vizibilă pentru utilizator. Imaginile pot fi stilizate, dar numai folosind comenzile de culoare , fundal , culoare de fundal și umbră text. Warto indică faptul că strălucirea imaginii de fundal este ignorată. În același timp, puterea fundalului poate fi scurtată pentru a adăuga culoare, altfel orice imagine va fi ignorată.
Pliere dublă (:) și pliere dublă dublă (::)
Pseudo-elementul ::selection a fost adăugat la CSS3 prin încercarea de a adăuga pseudo-clase la pseudo-elemente folosind subdosarul care a fost adăugat la pseudo-elemente. Din fericire, majoritatea browserelor vor accepta semnificația elementelor duble simple sau subordonate în pseudo-elemente, astfel încât pseudo-elementul ::selection este întotdeauna susceptibil să înceapă cu un element dublu dublu.
Când vedeți oricare dintre textul demonstrativ de mai jos, fundalul devine portocaliu pentru pseudo-elementul ::selection. De asemenea, arătați respect față de ::-moz-selection. Prefixul Mozilla a fost adăugat pentru a se asigura Îți voi oferi cea mai bună atingere pentru toate browserele.
::-moz-selection ( fundal: #ff7b29; ) ::selection ( fundal: #ff7b29; )
Demonstrarea pseudo-elementelor
Săgeată ( fundal: #2db34a; culoare: #fff; afișare: bloc inline; înălțime: 30px; înălțime linie: 30px; umplutură: 0 12px; poziție: relativă; decor text: niciunul; ) săgeată:după ( conținut: ""; înălțime: 0; poziție: absolut; lățime: 0; ) .săgeată: înainte ( chenar-jos: 15px solid #2db34a; chenar-stânga: 15px solid transparent; #2db34a; stânga: -15px; ) .săgeată: după ( chenar-jos: 15px solid transparent; chenar-stânga: 15px solid #2db34a; chenar-sus: 15px solid transparent; dreapta: -15px; ) .arrow:hover ( fundal: #ff7b29; ) .arrow:hover:before ( chenar-jos: 15px solid #ff7b29; chenar-sus: 15px solid #ff7b29; ) .arrow:hover:after ( chenar-stânga: 15px solid #ff7b29; )
Suport pentru selectoare în browsere
La acel moment, pe măsură ce acești selectori demonstrează diferitele posibilități și viabilitatea de a lucra eficient, discursurile uimitoare de la Te voi ajuta cu CSS, acestea suferă uneori de un suport prost pentru browser. Înainte de a face acest lucru, deoarece acest lucru este mai critic, examinați selectoarele pe care doriți să le utilizați în cele mai populare browsere și apoi aflați despre cele care vi se potrivesc diferit.
CSS3.info dispune de instrumentul de testare a selectoarelor CSS3, care vă informează despre ce selectoare sunt acceptate de browser. De asemenea, este o idee proastă să verificați suportul pentru browser direct în cel nou.
Pe Smashing Magazine
Un selector face parte dintr-o regulă CSS care spune browserului ce element(e) din pagina web vor fi stilizate.
Termenul selector poate fi aplicat unui selector simplu, unui selector compus, unui selector complex sau unei liste de selectori.
Inainte de iertați selecționatorii apărea:
- selector de tip
- selector universal
- selectoare de atribute
- Selector ID
- selector de clasă
- pseudo-clasic
| Selector CSS | fundul | Descriere | CSS |
|---|---|---|---|
| .clasă | .clasa mea | Selectează toate elementele clasei myClass (class="myClass"). | 1 |
| #id | #principal | Selectează un element cu identificatorul main (id="main"). | 1 |
| * | Selectați elementele uscate. | 2 | |
| element | span | Selectați toate elementele . | 1 |
| element, element | div, span | Selectați toate elementele și toate elementele .
|
1 |
| [atribut] | Selectează toate elementele cu atributul titlu. | 2 | |
| [atribut="valoare"] | Selectează toate elementele cu atributul titlu, a căror valoare este exact aceeași cu valorile specificate în selector (title="cost)"). !}!} | 2 | |
| [atribut~="valoare"] | Selectează toate elementele cu atributul titlu, a căror valoare (orice loc) are o secvență (sub forma cuvântului din jur) „unu” (titlu=" unu și doi)"). !}!} | 2 | |
| [atribut|="valoare"] | Selectați toate elementele cu atributul lang a căror valoare începe cu „ru”. | 2 | |
| [atribut^="valoare"] | A | Vibrația elementului pielii cu atributul href, a cărui valoare începe cu „https”. | 3 |
| [atribut$="valoare"] | Selectează toate elementele cu un atribut src a căror valoare se termină în „.png” (src="some_img.png"). | 3 | |
| [atribut*="valoare"] | Selectează toate elementele cu atributul titlu, a căror valoare (orice loc) are o secvență (a se vedea cuvântul sau partea din jur) „unu” (titlu=" unu și doi)"). !}!} | 3 |
Selector de depozit- aceasta este o succesiune de selectori simpli, care sunt separate prin combinatoare, adică un selector este urmat imediat de pași. Selectează un element care se potrivește tuturor selectoarelor simple care pot fi plasate. Un selector de tipul sau un selector universal, care este inclus înaintea selectorului de depozit, este vinovat că a fost deranjat în primul rând în această secvență. Într-un selector pliat, este permis un singur tip de selector sau un selector universal.
Span.className p.className1.className2#someId:hover
Selector pliabil- Aceasta este succesiunea selectoarelor, separate prin combinatoare.
Lista selectoarelor- selectoare tse, reasigurare prin coma.
Combinatori
Pentru a combina selectoare CSS simple, combinatoarele sunt folosite pentru a indica interacțiunile dintre selectoarele simple. Există o mulțime de combinatoare CSS2 diferite și un CSS3 suplimentar, iar dacă le folosiți, acestea vor schimba natura selectorului în sine.
Pseudo-clasic
O pseudo-clasă este un selector simplu care este folosit pentru a selecta ceva care nu poate fi selectat folosind alți selectori, dar poate fi selectat, dar nu într-un mod important.
| Pseudo-clasă | fundul | Descriere | CSS |
|---|---|---|---|
| :legătură | o legătură | Selectați toate evenimentele neprevăzute. | 1 |
| :vizitat | a: vizitat | Selectați toate intrările trimise. | 1 |
| :activ | a:activ | Trimitere activă prin vibrare. | 1 |
| :planare | a:hover | Vibrație trimisă atunci când cursorul este plasat peste urs. | 1 |
| : Concentrează-te | intrare: focus | Selectați elementul , ceea ce este în atenție. | 2 |
| :primul copil | p:primul copil | Vibrația elementului pielii Care este prima fiică a tatălui său. |
2 |
| :lang(limba) | p:lang(ro) | Vibrația elementului pielii Cu atributul lang, semnificația începe cu „ru”. |
2 |
| :primul de tip | p: primul de tip | Vibrația elementului pielii Care este primul dintre elemente
|
3 |
| : ultimul de tip | p: ultimul de tip | Vibrația elementului pielii Ce rămâne din elemente Elementul tatălui său. |
3 |
| :numai-de-tip | p:numai-de-tip | Vibrația elementului pielii Care este un singur element Elementul tatălui său. |
3 |
| :singurul copil | p:copil-unic | Vibrația elementului pielii Care este un singur element copil al elementului tatălui său. |
3 |
| :nth-child(n) | p:nth-child(2) | Vibrația elementului pielii Elementul tatălui său. |
3 |
| : al-al-lea-ultimul-copil(n) | p:al-al-al-lea-ultimul-copil(2) | Vibrația elementului pielii Ce alt element copil din elementul tatălui său, respectând celălalt element copil. |
3 |
| :nth-of-type(n) | p:nth-of-type(2) | Vibrația elementului pielii Care este un alt element copil Elementul tatălui său. |
3 |
| :nth-ultimul-de-tip(n) | p:nth-ultimul-de-tip(2) | Vibrația elementului pielii Care este un alt element copil Elementul tatălui său, mirosind ca elementul fiică rămas. |
3 |
| 3 | |||
| :nu(selector) | :nu(p) | Selectați elemente uscate, în jurul elementului . |
3 |
Pseudo-elemente
Un pseudo-element este un element virtual care nu apare explicit în arborele elementelor documentului. Pseudo-elementele sunt folosite pentru selectarea acelor părți ale unui element care nu pot fi asociate cu alți selectori, precum și pentru stilizarea nu a întregului element, ci a altor părți ale acestuia.
Ce este un selector CSS?- aceasta este o descriere a unui element sau a unui grup de elemente care indică browserului ce element să selecteze pentru stilul într-un anumit stil. Să aruncăm o privire la selectoarele CSS de bază.
1) .X
.topic-title (culoare-fond: galben; )Selector CSS clasa X. Diferența dintre id și clasă este că aceeași clasă poate fi în mai multe elemente de pe pagină, iar id-ul este întotdeauna unic. Klasi varto vikoristovat pentru stasovannya același stil până la multe elemente.
- Crom
- Firefox
- Safari
- Operă
2) #X
#conținut (lățime: 960px; marjă: 0 automat; )Selector CSS pentru id. Semnul din fața selectorului CSS X selectează un element cu id = X. Majoritatea stilurilor după id trebuie să-și amintească întotdeauna că este unic - numai un astfel de id este atribuit paginii. Este mai bine să folosiți selectoare pentru clase, combinații de clase sau nume de etichete. Tim, nu mai puțin, selectoare după ID sunt binevenite să fie folosite în testarea automată, deoarece permiteți reciproc să interacționeze cu ei înșiși element necesarȘi mă bucur că există doar unul dintre acestea pe pagină.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
3) *
* ( marja: 0; umplutură: 0; )Selector CSS pentru toate elementele. Simbolul stea selectează toate elementele care se află pe pagină. Există mulți specialiști care folosesc această metodă pentru a reseta (zero) marjele și valorile de umplutură ale tuturor elementelor paginii. Tim nu este mai puțin, în practică este mai bine să nu funcționeze așa, deoarece acest selector CSS poate interfera foarte mult cu browserul căutând prin toate elementele de pe pagină.
Simbolul * poate fi modificat și pentru a afișa toate elementele copil:
#header * ( chenar: 5px gri solid; )
În acest exemplu, toate elementele copil (pad-urile) ale elementului #header sunt vizibile. Asigurați-vă că rețineți că acest selector este important pentru browser.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
4) X
a (culoare: verde; ) ol ( margine-stânga: 15px; )Selector de tip CSS. Cum să selectezi toate elementele de același tip, deoarece nu miros nici id, nici clasă? Varto vikorystuvati selector CSS în spatele tipului de element. De exemplu, pentru a selecta toate listele ordonate de pe pagină, selectați ol (...) așa cum se arată mai sus.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
5) X Y
li a (greutatea fontului: bold; text-decor: niciuna; )Selector de pad CSS sau Selector de elemente copil CSS Vikoristii sunt cel mai adesea abuzati. Pentru a fi învingător, este necesar să selectați elemente de tip cântat din multe elemente fiice. De exemplu, trebuie să vedeți toate mesajele care sunt în elementul li. În acest caz, utilizați acest selector. Vikoryst și șnururile unor astfel de selectoare, mai întâi întrebați-vă și puteți vikorist pentru o secvență și mai scurtă de selectoare pentru elementul vizibil.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
6) X+Y
div + p (familie de fonturi: „Helvetica Neue”, Arial, sans-serif; dimensiunea fontului: 18px; )Selector de elemente compuse jefuiește numai un element de tip Y, care vine imediat după elementul X. Pentru acest tip de skin, paragraful vine imediat după elementul skin div, selectați un tip și o dimensiune specială a fontului.
- Ce browsere sunt acceptate:
- IE7+
- Firefox
- Crom
- Safari
- Crom
7) X > Y
#conținut > ul ( chenar: 1px verde continuu; )Selector de pad CSS. Diferența dintre selectoarele X Y și X > Y este că selectorul este vizibil atunci când selectați doar elementele secundare din mijloc (selectând doar pad-urile directe). De exemplu:
- Element din listă
- Primul articol de pe listă
- Element din listă
- Element din listă
Selector CSS #content > ul select only ul, care este plasat direct pe blocul div cu id = "container". Nu alege ul, care este primul li. Acesta este un selector CSS puternic.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
8) X ~ Y
ol ~ p ( margine-stânga: 10px; )Selector de elemente surori (shaling). mai puțin suvory nizh X + Y. Vіn selectați ca primul și alte elemente p, care merg după ol.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
Pseudo-clasă: link Vikorist pentru a selecta toate mesajele pe care încă nu au fost făcute clic. Dacă este necesar să păstrați stilul de cânt înainte de a-l trimite, atunci pentru cine este vikory pseudo-clasa:vizitata.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
10) X
a(culoare:roșu;)Selector CSS din spatele atributului. Din ce aplicație selectați mesajele care afișează atributul titlu.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
11) X
a (culoare: galben; )- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
12)X
a (culoare: #dfc11f; )Steaua înseamnă că valoarea poate fi în atribut (în orice parte a atributului href). În acest fel, vor fi selecții și trimiteri de la https://www..stijit.. Până la toate trimiterile alese, va fi o culoare aurie.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
13) X
a ( fundal: url(path/to/external/icon.png) fără repetare; padding-left: 15px; )Pe unele site-uri, mesajele care trimit către alte site-uri au pictograme mici cu săgeți pentru a arăta ce mesaje sunt trimise. Caratul „^” este simbolul pentru urechea rândului. Astfel, pentru a selecta toate etichetele al căror href începe cu http, trebuie să utilizați selectorul CSS cu karat, așa cum se arată în aplicație.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
14) X
a (culoare: verde; )Aici expresia regulată și simbolul $ sunt folosite pentru a indica sfârșitul rândului. În a cărui aplicație putem vedea toate eforturile care se fac pe poze cu extensii.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
15) X
a (culoare: verde; )Stam aici Selector CSS din spatele atributului koristuvach. Adăugăm atributul nostru puternic data-filetype skin-ului:
posilannya
Acum, cu ajutorul selectorului CSS, puteți selecta toate opțiunile care duc la imagini cu orice extensie.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
16) X
Tilde (~) vă permite să vedeți un singur atribut într-o listă de atribute separate printr-un spațiu. Puteți specifica atributul data-info, în care indicați numărul Cuvinte cheie prin poiană. În acest fel, puteți indica că mesajul a fost trimis către lumea exterioară și către imagine.
posilannya
În plus, putem selecta elemente cu combinațiile de atribute necesare:
/* Selectare element, atribut de date-info pentru orice valoare externă */ a (culoare: verde; ) /* Selectare element, atribut de date-info pentru orice imagine de valoare */ a ( chenar: 2px negru întrerupt; )
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
17) X:verificat
intrare: bifat ( chenar: 3px la început negru; )Această pseudo-clasă vede doar elemente precum caseta de selectare sau butonul radio și numai dacă sunt deja în poziția desemnată.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
18) X: după
Pseudo-clase: înainte și după: chiar întuneric – creează conținut înainte și după elementul selectat.
Clearfix:după (conținut: ""; afișare: bloc; clar: ambele; vizibilitate: ascuns; dimensiunea fontului: 0; înălțimea: 0; ) .clearfix ( *afișare: bloc inline; _înălțimea: 1%; )
Aici pentru ajutor pentru pseudo-clasa: dupa blocul cu clasa. clearfix creează un rând gol și apoi îl șterge. Această abordare este abuzată, deoarece este imposibil să stingi puterea debordării: ascuns.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
19) X: hover
div:hover (culoare de fundal: rgba(11,77,130,0.5); )Îngheață stilul de cântare pentru element atunci când cursorul mouse-ului este plasat peste. Versiuni vechi Internet Explorer zastosovuyut: hover până la posilan.
A:hover (chenar-jos: 1px punctat albastru; )
- Ce browsere sunt acceptate:
- IE6+ (În IE6 va sta doar până la sfârșit)
- Crom
- Firefox
- Safari
- Operă
20) X: nu (selector)
div:not(#conținut) (culoare: gri; )Pseudo-clasă nu (încrucișată) Dacă, de exemplu, trebuie să selectați toate div-urile, în plus față de cele cu id="content" .
Folosind același principiu, puteți selecta toate elementele, cu excepția p:
*:nu(p) (culoare: albastru; )
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
21) X::pseudoElement
p::prima linie (greutatea fontului: bold; dimensiunea fontului: 24px; )Pseudo-elementele pot fi modificate pentru a consolida stilurile până la fragmente de elemente - de exemplu, până la primul rând al unui paragraf sau prima literă a unui cuvânt. Se lipește doar de elementele blocului.
Selectați primul paragraf:
P::prima literă (familie de fonturi: cursiv; dimensiunea fontului: 30px; greutatea fontului: bold; padding-right: 1px; )
Selectați primul rând pentru paragraf:
P:prima linie (dimensiunea fontului: 28px; greutatea fontului: bold; )
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Operă
22) X: primul copil
ul li:primul copil (border-top: none; )Pseudoclasa primul copil selectează prima parte a elementului Tatălui. Există adesea un wiki pentru a adăuga chenar la primul element din listă. Această pseudo-clasă este la propriu CSS 1.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari
- Opera 3.5+
- Android
23) X:ultimul-copil
ul > li:last-child (border-bottom: none; )Pseudo-clasa ultimul copil selectează partea rămasă a elementului Tatălui Vіn apărând numai din CSS 3.
- Ce browsere sunt acceptate:
- IE9+ (IE8 acceptă primul copil, nu ultimul copil. Microsoft (c))
- Crom
- Firefox
- Safari
- Opera 9.6+
- Android
24) X: singur-copil
div p:copilul singur (culoare: verde; )Pseudo-copil unic de clasă Vă permite să selectați acele elemente care sunt aceleași părți ale părinților voștri.
- Ce browsere sunt acceptate:
- Crom
- Firefox
- Safari 3.0+
- Opera 9.6+
- Android
25) X:nth-child(n)
li:nth-child(3) (culoare: negru; )Selectează elementul copil cu numărul specificat în parametru. selector de al-lea copil acceptă un număr întreg ca parametru, deci trebuie luat de la 1, atunci. Dacă trebuie să selectați un articol diferit din listă, verificați li:nth-child(2) . Toate pseudo-clasele din vikoristannyam nth-child au apărut numai din CSS 3.
- Ce browsere sunt acceptate:
- Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
26) X:ultimul-copil(n)
li:nth-last-child(2) (culoare: roșu; )Ce se întâmplă dacă aveți o listă mare de elemente în ul și trebuie să selectați al treilea element de la sfârșit? În loc să scrieți li:nth-child(109), puteți folosi vikory selector de tampoane rămase al-lea-ultimul-copil. Această metodă este aceeași cu prima, dar continuă de la capăt la capăt.
- Ce browsere sunt acceptate:
- Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
27) X:nth-of-type(n)
ul:nth-of-type(3) ( chenar: 1px punctat negru; )Deoarece pe pagină există multe liste neordonate, este necesar să setați stilul la a treia dintre ele, care nu are un id unic, astfel încât să puteți utiliza nth-of-type.
- Ce browsere sunt acceptate:
- Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
28) X:a-n-ul-ultimul-tip(n)
ul:nth-last-of-type(3) ( chenar: 2px ridge blue; )Pseudoclasa a n-a-ultimul-tip(n) atribuiri la alegerea celui de-al n-lea element al cântecului tip z kintsya.
- Ce browsere sunt acceptate:
- Crom
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
29) X:numai-de-tip
li:numai-de-tip (greutatea fontului: bold; )Pseudo-clasă numai de tip selectează elementele care se află între pereții elementului tatălui. De exemplu, puteți selecta toate uls, care se vor potrivi numai cu aceleași.
- Ce browsere sunt acceptate:
- Crom
- Firefox 3.5+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
30) X: primul de tip
ul:first-of-type > li:nth-child(3) ( stilul fontului: cursiv; )Pseudo-clasă prima de tip selectează primul element de tipul dat
- Ce browsere sunt acceptate:
- Crom
- Firefox 3.5+
- Safari 3.1+
- Opera 9.5+
- Android 2.1+
- iOS 2.0+
Ultima actualizare: 21.04.2016
Atribuirea stilului începe de la selector. De exemplu:
Div( lățime:50px; /* lățime */ înălțime:50px; /* înălțime */ culoarea fundalului:roșu; /* culoarea fundalului */ margine: 10px; /* acces la alte elemente */ )
U la acest tip selector є div. O serie de selectoare definesc numele elementelor care sunt formatate, de exemplu, div, p, h2 etc. Când este selectat un astfel de selector, stilul va fi limitat la toate elementele similare acestui selector. Pentru ca stilul de cânt mai mult să fie consolidat la toate elementele
selectoare CSS
Există 3 elemente div pe pagină și toate vor fi stilate:
Klasi
Cu toate acestea, aceste elemente în sine necesită o varietate de stilizare. Și aici putem vikorystuvat clasa.
Pentru a atribui un selector unei clase CSS, puneți un punct în fața numelui clasei:
RedBlock (culoare de fundal: roșu; )
Numele clasei poate fi suficient. De exemplu, numele clasei este „redBlock”. Cu toate acestea, în numele clasei este permisă folosirea de litere, cifre, cratime și semne de accent, iar începutul numelui clasei este obligatoriu cu litere.
De asemenea, ajustați cu atenție registrul de nume: denumirile „articol” și „ARTICOL” reprezintă clase diferite.
După atribuirea unei clase, o putem atribui unui element folosind atributul de clasă suplimentar. De exemplu:
Ceea ce este semnificativ este numărul de clase:
CSS elegant
Identificatori
Pentru a identifica elemente unice pe pagina web, sunt identificați identificatori care sunt alocați unor atribute suplimentare de id. De exemplu, pe pagină puteți avea un bloc de cap sau un antet:
Atribuirea stilurilor pentru identificatori este similară cu alocarea claselor, cu excepția faptului că simbolul hash # este folosit în locul punctului:
Cu toate acestea, rețineți că identificatorii se referă în mare parte la structura paginii web și mai puțin la stilizare. Pentru stilizare, este important să folosiți diferite clase, identificatori mai mici.
Selector universal
Numărul de selectatori de etichete, clase și identificatori în css este, de asemenea, numit selector universal, care este reprezentat de semnul stelar (*). Se aplică stiluri tuturor elementelor de pe pagina html:
*(culoarea fundalului: roșu; )
Stilizarea unui grup de selectoare
Unele stiluri de cântece sunt limitate la o întreagă gamă de selectoare. De exemplu, vrem să acoperim toate rubricile de sub fotoliu. În acest caz, putem converti selectoarele tuturor elementelor prin comă:
CSS3
Selector
Grup de selecție
Selector
Grup de selecție
Textul real...
Un grup de selectori poate include atât selectori de etichete, cât și selectori de clase și identificatori, de exemplu:
H1, #header, .redBlock(culoare: roșu; )
