Css - selectoare, IT-șef

În această lecție vom învăța tipurile de bază de selectori, și să învețe să le folosească în practică.

Care sunt selectoare CSS?

Selectori - acestea sunt regulile, pe baza cărora elementele de selecție într-un document HTML pentru a le aplica anumite stiluri cu proprietati CSS.

în cazul în care: p - acest selector, text-align și font-size - este proprietăți, și un centru, si 20px - valori.

Principalele tipuri de selectoare

• membru selector (ex: div);
• selector de clasă (de exemplu, centru.);
• identificatorul selector (ex: #footer);
• * Selector (selectați toate articolele);
• atribut selectori (de exemplu: # 91; * href = "youtube" # 93; );
• selectorii pseudo (ex: p: first-de-tip).

Selector: Element

Selectarea tuturor elementelor dintr-un document HTML care au tag-ul specificat.

De exemplu, mulțimea tuturor elementelor

padding egală cu 5px.

Selector: clasa

Selectarea tuturor elementelor dintr-un document HTML cu clasa specificată.

De exemplu, mulțimea tuturor elementelor cu class = „centru“ aliniere a textului în mijloc.

Selector: ID

Selectarea unui element din documentul HTML având identificatorul.

De exemplu, setați celula având identificatorul id = „footer“ Înălțimea 50px și exterioară 20px margine superioară.

Selector: *

Selectarea tuturor elementelor dintr-un document HTML.

De exemplu, setul tuturor elementelor padding interne și externe egale cu 0.

atribut selectoare

Caracteristica selectoare concepute pentru a selecta elemente, în funcție de un atribut al elementului menționat sau valoarea acestuia. Următoarele tipuri de atribute: # 91; # 93 atribut;. # 91; atribut = valoare # 93;. # 91; un atribut ^ = valoarea # 93;. # 91; un atribut | = valoarea # 93;. # 91; un atribut $ = valoarea # 93;. # 91; un atribut * = valoarea # 93;. # 91; un atribut

selector: # 91; # 93 atribut;

Selectarea tuturor elementelor dintr-un document HTML care au atributul specificat.

De exemplu, setați culoarea de fundal pentru toate elementele cu un atribut țintă.

selector: # 91; atribut = valoare # 93;

Selectați toate elementele care au atribut = „valoare“.

De exemplu, pentru a instala un fundal verde pentru toate elementele cu rel = „nofollow“.

selector: # 91; un atribut ^ = valoarea # 93;

Selectează toate elementele care au un atribut a cărui valoare începe cu o valoare.

De exemplu, setați culoarea de fundal galben pentru toate elementele cu atributul de clasă. a cărui valoare începe cu culoare.

selector: # 91; un atribut | = valoarea # 93;

Selectați toate elementele care au atributul a cărui valoare este egală cu valoarea sau începe cu valoarea urmează * pe valoare (valoare cu o cratimă opțională, după care există o valoare de conținut rămas).

De exemplu, setați culoarea de fundal portocaliu pentru toate elementele cu atributul de clasă. valoare este egală cu sau Armei de testare *.

selector: # 91; un atribut $ = valoarea # 93;

Selectează toate elementele care au un atribut a cărui valoare se termină la valoarea.

De exemplu, setați culoarea de fundal galben pentru toate elementele cu atributul de clasă. valoarea care se termină de culoare.

selector: # 91; un atribut * = valoarea # 93;

Selectați toate elementele care au un atribut a cărui valoare conține valoarea șir.

De exemplu, pentru a instala o culoare de fundal verde pentru toate elementele cu un atribut href conține subșirul „youtube“.

selector: # 91; un atribut

Selectați toate elementele care au un atribut a cărui valoare conține o valoare ca fiind una dintre valorile unui spațiu.

De exemplu, setați culoarea de fundal maro pentru toate elementele care au o clasă de atribut cuprinde textul ca fiind una dintre valorile unui spațiu.

pseudo

Pseudo folosit pentru a determina elementul de stat particular. Spre deosebire de aceste clase, ele nu sunt specificate în mod explicit în HTML. În CSS numele pseudo începe cu două puncte (:). Următoarele tipuri de pseudo-clase. link-ul. Am vizitat. activă. Hover. se concentreze. lang (limba). primul-copil. primul-de-tip. ultimul copil. -De-tip trecut. numai-copil. numai de tip. nth-copil (n). nth-ultimul-copil (n). nth-de-tip (n). nth-ultimul-de-tip (n). rădăcină. gol. țintă. activat. dezactivat. Am verificat. nu (selector).

Selector: link

Selectarea toate link-urile nevizitate.

De exemplu, setați culoarea verde pentru toate link-urile nevizitate.

Selector: a vizitat

Selectarea toate link-urile vizitate.

De exemplu, setați culoarea roz pentru toate link-urile vizitate.

Selector: activ

Selectați un element prin apăsarea acestuia.

De exemplu, setați culoarea galbenă a textului atunci când faceți clic pe un element.

Selector: Hover

Selectați un element cu cursorul la prezentarea lui.

De exemplu, setați culoarea roșie a elementului de text, accesul prezent la cursorul acesta.

Selector: focus

Selector: se concentreze pentru selectarea unui element care este focalizat. Acesta este conceput pentru elementele care primesc evenimente de la tastatură sau alte dispozitive de intrare.

De exemplu, setați culoarea luminii de fundal albastru pentru elementul care este focalizat.

Selector: lang (limba)

Selector: lang () este folosit pentru a selecta elemente cu un atribut de limbă, care au o valoare specificată.

De exemplu, setați culoarea de fundal galben pentru toate elementele.

. al cărui atribut lang conține valoarea „ru“.

Selector: primul copil

Pseudo-clasa: primul-copil este utilizat pentru a selecta aceste elemente, dacă acestea sunt primul copil al părintelui său.

De exemplu, pentru a selecta fiecare element

. care este primul copil al părintelui său.

Selector: primul-de-tip

Pseudo: primul-de-tip este utilizat pentru selectarea acestor elemente în cazul în care acestea sunt primul element copil al acestui tip (etichetă) a societății-mamă. Spre deosebire de psvedoklassa: primul copil. acest pseudo-: primul-de-tip conturi pentru doar elemente cu tag-ul specificat.

De exemplu, pentru a selecta fiecare element

. care este primul element copil de acest tip mamă.

Selector: ultimul copil

Pseudo-clasa: ultimul copil este utilizat pentru a selecta aceste elemente, dacă acestea sunt ultimul copil al părintelui său.

De exemplu, pentru a selecta fiecare element

. care este ultimul copil al părintelui său.

Selector: ultima-de-tip

Pseudo: ultima-de-tip este utilizat pentru selectarea acestor elemente în cazul în care acestea sunt ultimul element copil al acestui tip (etichetă) a societății-mamă. Spre deosebire de psvedoklassa: ultimul copil. acest pseudo-: ultimul de tip conturi pentru doar elemente cu tag-ul specificat.

De exemplu, pentru a selecta fiecare element

. care este ultimul element copil al său tip părinte.

Selector: numai copil

Pseudo-clasa: numai-copil este utilizat pentru a selecta aceste elemente, dacă acestea sunt singurul copil al părintelui său.

De exemplu, pentru a selecta fiecare element

. care este singurul copil al părintelui său.

Selector: numai de tip

Pseudo: numai de tip este utilizat pentru selectarea acestor elemente, dacă acestea sunt singurele elemente ale acestui tip de copil (etichetă) a societății-mamă. Spre deosebire de psvedoklassa: doar copil. acest pseudo-: numai de tip conturi pentru doar elemente cu tag-ul specificat.

De exemplu, pentru a selecta fiecare element

. care este singurul copil al unui anumit tip de mamă.

Selector: nth-child (n)

Pseudo-clasa: nth-child (n) este utilizat pentru a selecta aceste elemente, dacă acestea sunt copil n -ymi părintelui său. Numărătoarea începe cu elemente 1.

De exemplu, pentru a selecta fiecare element

. care este al doilea copil al părintelui său.

Pseudo-clasa: nth-child (n) n poate fi folosit în loc de cuvinte cheie ciudat și chiar. sunt destinate să selecteze elemente copil, care sunt, respectiv, chiar sau impar indici (elemente indici pentru copii începând cu 1).

De exemplu, setați o culoare diferită pentru cele impare chiar elemente copil

.

De asemenea, în Pseudo: nth-copil poate utiliza în schimb formula n + o b. în cazul în care a și b - este numărul specificat de către utilizator. A n - este un contor care primește valorile 0, 1, 2, 3.

De exemplu, pentru a selecta elemente copil

. Indicii sunt multipli de trei.

De exemplu, pentru a selecta elemente copil

. Codurile care sunt 1, 4, 7, 10.

Selector: nth-ultimul-copil (n)

Pseudo-clasa: nth-ultimul-copil (n) este similar cu clasa: nth-child (n), cu diferența că numărul de elemente de copil se realizează de la sfârșitul anului. De asemenea, Pseudo: nth-ultimul-copil (n) poate fi folosit în loc de n impar. sau chiar formula an + b.

Selector: nth-de-tip (n)

Pseudo: nth-de tip (n) aplicate elementele de selecție în cazul în care acestea sunt n elemente copil -ymi de acest tip (tag) de mamă. Spre deosebire de psvedoklassa: nth-child (n). pseudo: nth-de-tip (n) ia în considerare numai elementele cu tag-ul specificat. În plus, această pseudo-clasă: nth-de tip (n) permite, de asemenea, utilizarea de cuvinte cheie impare. și chiar formula an + b.

De exemplu, pentru a selecta fiecare element

. care este al doilea copil al unui anumit tip de mamă.

Selector: nth-ultima-de-tip (n)

Pseudo: nth-ultima-de-tip (n) este similar cu clasa: nth-de-tip (n), cu o diferență, care se desfășoară de la sfârșitul numărătoarea inversă a acestui tip de elemente copil (tag-ul).

Selector: rădăcină

Pseudo-clasă: rădăcina este utilizată pentru a selecta elementul rădăcină al unui document HTML, de exemplu, element . Spre deosebire de selectorul html # 123;. # 125; acest pseudo are prioritate mai mare:

De exemplu, setați culoarea de fundal galben.

Selector: gol

Pseudo: gol pentru selectarea elementelor goale, adică elemente, care nu conțin alte elemente sau orice text.

De exemplu, setați culoarea de fundal și dimensiunea pentru elemente goale

.

Selector: țintă

Pseudo-clasa: țintă este de a selecta un element de identificare (de exemplu: part1), care este specificat în URL-ul după simbolul #.

Selector: activat

Pseudo: activat pentru forme de element de selecție care sunt disponibile pentru un control, și anume ei pot răspunde la interacțiunea cu utilizatorul.

De exemplu, pentru a seta culoarea de fundal la elemente galbene . care sunt disponibile pentru gestionarea.

Selector: dezactivat

Pseudo: dezactivat pentru selectarea elementelor forme, care sunt inaccesibile pentru a controla, adică ei nu pot răspunde la acțiunile utilizatorului.

De exemplu, pentru a seta culoarea de fundal la elemente galbene . care nu este disponibil pentru managementul.

Selector: verificate

Pseudo-clasa: verificate pentru articole selectați Radio ( ), Checkbox ( ) Și opțiunea. care sunt pornite.

De exemplu, selectați elementele care sunt în poziția închis, adică Am verificat.

Selector: nu (Selector)

Pseudo: nu (Selector) pentru selectarea toate celulele care nu intră sub acțiunea selectorului menționat.

De exemplu, selectați toate elementele de pe o pagină web, cu excepția