Css - szelektor, Chief IT

Ebben a leckében megtanuljuk az alapvető típusa szelektor, és megtanulják, hogy használja őket a gyakorlatban.

Mik szelektor CSS?

Selectors - ezek a szabályok alapján, amelyek a kiválasztási elemek egy HTML dokumentumban, hogy azokat alkalmazzák egyes stílusok CSS tulajdonságok.

ahol: p - ez választó, text-align és font-size - ez tulajdonságait, és a center, és 20px - értékeket.

A főbb típusai a szelektor

• váiasztóeiem (pl: div);
• osztály választó (például központ.);
• választó azonosítója (például: #footer);
• * Választó (az összes elemet ki);
• attribútum szelektor (pl: # 91; href * = "youtube" # 93; );
• pszeudo szelektor (pl: p: first-of-típus).

Selector: elem

Válogatás az összes elemet a HTML dokumentumban, amelyek az adott címke.

Például, a készlet minden eleme

padding egyenlő 5px.

Selector: class

Válogatás az összes elemet a HTML dokumentumban a megadott osztályban.

Például, a készlet minden elemek class = „center” összehangolás a szöveg közepén.

Selector: ID

Kiválasztott egy elemet a HTML dokumentumban, amely az azonosító.

Például, meg a cella azonosító id = „footer” 50px magassága és a külső felső margó 20 képpont.

Selector: *

Válogatás az összes elem egy HTML dokumentumban.

Például, a készlet minden elemét belső és külső párnázás egyenlő 0.

attribútum szelektor

Képesség szelektor tervezett elemek kijelölése, attól függően, hogy egy attribútum az említett elem vagy annak értékét. A következő típusú attribútumok: # 91; # 93 attribútum;. # 91; attribútum = érték # 93;. # 91; egy attribútum ^ = érték # 93;. # 91; egy attribútum | = érték # 93;. # 91; egy attribútum $ = érték # 93;. # 91; egy attribútum * = érték # 93;. # 91; egy attribútum

választó: # 91; # 93 attribútum;

Válogatás az összes elemet a HTML dokumentumban, amelyek a megadott attribútum.

Például a háttér színét az összes elemet a target attribútum.

választó: # 91; attribútum = érték # 93;

Minden elem kiválasztása, amelynek attribútuma = „érték”.

Például telepíteni egy zöld háttér az összes elemet a rel = „nofollow”.

választó: # 91; egy attribútum ^ = érték # 93;

Kiválasztja az összes elemet, amelyek egy attribútum, amelynek értékét kezdődik érték.

Például, meg a sárga háttérszín az összes elemet a class attribútummal. amelynek értéke kezdődik színű.

választó: # 91; egy attribútum | = érték # 93;

Az összes elem kijelölése, amelyben az attribútum, amelynek értéke eléri vagy értékeljük kezdődik az értéket a következőképpen érték- * (érték választható kötőjel, ami után van egy maradék tartalom érték).

Például, meg a narancssárga háttérszín az összes elemet a class attribútummal. érték egyenlő vagy vizsgálati teszt- *.

választó: # 91; egy attribútum $ = érték # 93;

Kiválasztja az összes elemet, amelyek egy attribútum, amelynek értéke végződik az értéket.

Például, meg a sárga háttérszín az összes elemet a class attribútummal. amelynek értéke végződik színű.

választó: # 91; egy attribútum * = érték # 93;

Minden elem kiválasztása, amelynek attribútum, amelynek értékét tartalmazza a string értéket.

Például telepíteni egy zöld háttér színét minden olyan elem, amelynek href attribútum tartalmazza azt a rész „youtube”.

választó: # 91; egy attribútum

Minden elem kiválasztása, amelynek attribútuma, amelynek értéke egy értéket tartalmaz, mint az egyik értékeit helyet.

Például, meg a barna háttér színét az összes elemet, amelyek egy attribútum osztály tartalmaz szöveget a következő értékek egyike egy tér.

ál

Pszeudo meghatározásához használt különleges állapot elem. Ezzel szemben ezekben az osztályokban, nincsenek kifejezetten meghatározott HTML. A CSS pszeudo név kezdődik egy kettőspont (:). A következő típusú pszeudo-osztályok. link. Meglátogattam. aktív. hover. összpontosítani. lang (nyelv). első gyermeke. első-of-típusú. last-gyermek. last-A-típusú. Csak gyermekre. csak-a-típusú. n-ed gyermek (n). n-edik-last-gyermek (n). n-edik-A-típusú (n). n-edik-last-a-típusú (n). gyökér. üres. célt. engedélyezve. tiltva. Megnéztem. Nem (választó).

Selector: link

Kiválasztása az összes nem meglátogatott hivatkozások.

Például, meg a zöld színt az összes nem meglátogatott hivatkozások.

Selector: látogatott

Kiválasztása minden meglátogatott linkek.

Például a szín rózsaszín minden meglátogatott linkek.

Selector: aktív

Válasszon egy elemet megnyomva.

Például, meg a sárga szín a szöveget, ha rákattint egy elemre.

Selector: hover

Válasszon ki egy elemet a kurzort a bemutatót neki.

Például, meg a piros szín a szöveg elem, jelen hozzáférést biztosít a kurzor meg.

Selector: fókusz

Selector: fókuszálunk kiválasztott egy elemet, amely a középpontban. Úgy tervezték, a terméket kapnak billentyűzet események vagy más beviteli eszközök.

Például, meg a világoskék háttér színét a tétel, hogy van a fókuszban.

Selector: lang (nyelv)

Selector: lang () lehet beállítani, hogy az elemeket a nyelv attribútumot, amely egy meghatározott értéket.

Például, meg a sárga háttérszín az összes elemet.

. akinek lang attribútum értéket tartalmaz „ru”.

Selector: first-child

A pszeudo-osztály: first-child használják ezeket a tételeket kiválasztja ha az első gyermek a szülő.

Például válassza ki az egyes elemeket

. amely az első gyermek a szülő.

Selector: first-of-típusú

Pszeudo: first-of-típusú használt kiválasztása ezen elemek, ha azok az első gyermek ilyen típusú elemből (tag) a szülő. Eltérően psvedoklassa: első gyermeke. ez ál-: first-of-típusú számlák csak elemeket a megadott tag.

Például válassza ki az egyes elemeket

. amely az első gyermek eleme a szülő típus.

Selector: last-child

A pszeudo-osztály: last-gyermek lehet beállítani, hogy ezek a tételek, ha azok az utolsó gyermek a szülő.

Például válassza ki az egyes elemeket

. amely az utolsó gyermek a szülő.

Selector: last-of-típusú

Pseudo: last-of-típusú használt kiválasztása ezen elemek, ha azok az utolsó gyermek ilyen típusú elemből (tag) a szülő. Ellentétben psvedoklassa: last-gyermek. ezt ál-: last-of-típusú számlák csak elemeket a megadott tag.

Például válassza ki az egyes elemeket

. amely az utolsó gyermek eleme a szülő típus.

Selector: csak-gyermek

A pszeudo-osztály: csak-gyermek lehet beállítani, hogy ezek a tételek, ha azok egyetlen gyermeke a szülő.

Például válassza ki az egyes elemeket

. amely az egyetlen gyermek a szülő.

Selector: csak-a-típusú

Pseudo: csak-a-típusú használt kiválasztása ezen elemek is, ha ez az egyetlen gyermek elemek ilyen típusú (tag) a szülő. Ellentétben psvedoklassa: csak-gyermek. ezt ál-: csak-a-típusú számlák csak elemeket a megadott tag.

Például válassza ki az egyes elemeket

. amely az egyetlen gyermeke egy adott típusú szülő.

Választó: n-ed gyermek (n)

A pszeudo-osztály: n-ed gyermek (n) lehet beállítani, hogy ezek a tételek, ha azok n -ymi gyermek a szülő. A számlálás kezdődik elemek 1.

Például válassza ki az egyes elemeket

. amely a második gyermek a szülő.

A pszeudo-osztály: n-ed gyermek (n) n lehet használni kulcsszavak helyett páratlan és páros. célja, hogy válassza ki a gyermek elemeket, amelyek rendre a páros vagy páratlan indexek (indexek gyermek elemek kezdve 1).

Például, meg egy másik színt a páros és páratlan gyermek elemek

.

Szintén Pszeudo: n-ed gyermek is helyette az általános képletű N an + b. ahol a és b - a szám a felhasználó által megadott. A n - egy olyan számláló, amely megkapja a értéke 0, 1, 2, 3.

Például válassza ki a gyermek elemek

. indexek többszörösei három.

Például válassza ki a gyermek elemek

. kódok, amelyek 1, 4, 7, 10.

Választó: n-ed last gyermek (n)

A pseudo-osztály: n-ed last gyermek (n) hasonló az osztály: n-edik-gyermek (n), azzal a különbséggel, hogy a száma gyermek elemek végzik végétől. Szintén Pszeudo: n-ed last gyermek (n) lehet használni, hanem n páratlan. vagy akár az általános képletű an + b.

Választó: n-edik-of-típusú (n)

Pszeudo: n-edik-of-típusú (n) van elrendezve az említett kiválasztási elemek, ha azok n -ymi gyermek elemek az ilyen típusú (tag) a szülő. Eltérően psvedoklassa: n-ed gyermek (n). ál: n-edik-of-típusú (n) figyelembe véve csak az elemek a megadott tag. Ezen túlmenően, ez a pszeudo-osztály: n-edik-of-típusú (n) is lehetővé teszi a használatát kulcsszavak páratlan. és még a képlet egy + b.

Például válassza ki az egyes elemeket

. amely a második gyermek egy adott típusú szülő.

Választó: n-ed utolsó-a-típusú (n)

Pszeudo: n-ed utolsó-a-típusú (n) hasonló az osztály: n-edik-A-típusú (n) azzal a különbséggel, hogy végezzük végétől a visszaszámlálás az ilyen típusú gyermek elemek (tag).

Selector: root

A pszeudo-osztály: gyökerét használják, hogy kiválassza a gyökér elem a HTML dokumentum, azaz a elem . Ellentétben választó html # 123;. # 125; ez ál magasabb prioritással rendelkezik:

Például, meg a sárga háttér színét.

Selector: üres

Pszeudo: üres kiválasztására üres elemek, azaz a elemek, amelyek nem tartalmaznak más elemeket, vagy bármilyen szöveget.

Például a háttér színe és mérete üres elemek

.

Selector: cél

A pszeudo-osztály: cél az, hogy válasszon egy tételt azonosító (például: part1), amely az URL tartalmazza után # jelet.

Selector: engedélyezve

Pszeudo: engedélyezve szelekciós elem alkotja, amelyek rendelkezésre állnak a kontroll, azaz a tudnak reagálni a felhasználói beavatkozást.

Például, hogy a háttér színe sárga elemek . amelyek rendelkezésre állnak a menedzsment.

Selector: a fogyatékkal

Pszeudo: tiltva kiválasztására elemek számára nem hozzáférhető, hogy ellenőrizzék, azaz nem tudnak reagálni a felhasználói műveletekre.

Például, hogy a háttér színe sárga elemek . amely nem áll rendelkezésre a vezetés.

Selector: bejelölve

A pszeudo-osztály: ellenőrizni elemkijelölő rádió ( ), Négyzete ( ) És opciót. amelyek be vannak kapcsolva.

Például, válassza ki az elemeket, amelyek a zárt helyzetben, azaz a Megnéztem.

Selector: nem (választó)

Pseudo: nem (választó) kiválasztására minden sejt, amely nem tartozik a kereset az említett választó.

Például válassza ki az összes elemet egy internetes oldalon, kivéve