Definitívna príručka pre pseudotriedy CSS
Či ste nováčik alebo skúsený vývojár CSS, o ktorom ste pravdepodobne počuli pseudo-triedy. Najznámejšia pseudotrieda je pravdepodobne :vznášať sa, čo nám umožňuje štýlovať prvok, keď je v stave vznášania sa, to znamená, keď je na ne smerované ukazovacie zariadenie, ako je myš.
Po koncepte našich predchádzajúcich príspevkov na okraji: automatické a CSS Floats sa na tomto príspevku podrobnejšie zaoberáme pseudotriedami. Uvidíme čo sú skutočne pseudo-triedy, ako fungujú, ako ich môžeme kategorizovať a ako sa líšia od pseudo-elementov.
Čo sú pseudotriedy?
Pseudo-trieda je kľúčové slovo, ktoré môžeme pridať do výberu CSS definujte špeciálny stav príslušného elementu HTML. Do výberu CSS môžeme pridať pseudo-triedy pomocou syntax hrubého čreva : ako toto: a: podržte ...
Trieda CSS je atribút, ktorý môžeme pridať do prvkov HTML, pre ktoré chceme použiť rovnaké pravidlá štýlu, ako sú napríklad položky v hornej časti ponuky alebo názvy widgetov na bočnom paneli. Inými slovami, môžeme použiť triedy CSS skupiny alebo klasifikovať prvky HTML ktoré sú podobné jednému alebo druhému.
Pseudotriedy sú podobné tým, v tom zmysle, že sú tiež používa sa na pridanie pravidiel štýlu prvkom, ktoré majú rovnakú vlastnosť.
Ale zatiaľ čo sú skutočné triedy definované užívateľom a možno nájsť v zdrojovom kóde, napríklad práca pravidelných tried CSS je to klasifikovať alebo zoskupovať prvky. Vývojári vedia, ako majú byť ich prvky zoskupené: môžu vytvárať triedy ako "položky menu", "tlačidlá", "miniatúry" atď., Aby mohli zoskupovať a neskôr podobné prvky. Tieto klasifikácie sú založené na charakteristikách prvkov, ktoré sú dané samotnými vývojármi. Napríklad, ak sa vývojár rozhodne použiť a Prvky HTML však majú ich vlastné spoločné charakteristiky na základe ich stavu, postavenia, charakteru a interakcie so stránkou a používateľom. Toto sú vlastnosti, ktoré sú nie zvyčajne označené v kóde HTML, ale môžeme zamerať ich na pseudotriedy v CSS, napríklad: Toto sú druhy charakteristík, ktoré sú vo všeobecnosti zamerané na pseudotriedy. Aby sme lepšie pochopili rozdiel medzi triedami a pseudotriedami, predpokladajme, že používame triedu Tieto posledné podriadené prvky môžeme štýlovať nasledujúcim CSS: Ale čo sa stane, keď sa zmení posledný prvok? No, budeme musieť presunúť Táto komplikácia Aktualizácia tried môže byť ponechaná užívateľovi agent, prinajmenšom pre tie charakteristiky, ktoré sú spoločné medzi prvkami (a posledný prvok je taký bežný, ako môže získať). Majúce vopred definované Existuje mnoho druhov pseudotried, ktoré nám poskytujú spôsoby, ako zacieliť elementy na základe ich vlastností, ktoré sú inak neprístupné alebo ťažšie prístupné. Tu je zoznam štandardných pseudo-tried v MDN. Dynamické pseudotriedy sa pridávajú a odstraňujú z elementov HTML dynamicky, založené na stave, do ktorého prechádzajú ako odpoveď na interakcie používateľa. Niektoré z príkladov dynamických pseudotried Štátne pseudotriedy sa pridávajú k prvkom, keď sú v určitom statickom stave. Niektoré z jeho najznámejších príkladov sú: Najpopulárnejšia pseudotrieda založená na štáte musí byť Štrukturálne pseudotriedy klasifikujú prvky na základe o ich pozícii v štruktúre dokumentu. Jeho najbežnejšie príklady sú Existujú tiež rôzne pseudo-triedy, ktoré sa ťažko klasifikujú, ako napríklad: Jednou z najťažších vecí ohľadom pseudotriedy je pravdepodobne pochopiť rozdiel medzi Obe sú štrukturálne pseudotriedy a označujú špecifický prvok vo vnútri rodičovského elementu (kontajner), ale iným spôsobom. predpokladať n je potom 2 Poďme sa pozrieť na príklad. Pozrime sa, ako tento krátky CSS štýl HTML v dvoch rôznych prípadoch. V prípade 1 druhý prvok vo vnútri a Ale ak rodičovský prvok robí mať druhý odsek, V našom príklade Odsek 1, Dieťa 1 Odsek 2, Dieťa 3 V druhom prípade presunieme neusporiadaný zoznam na tretie miesto a druhý odsek pred ním. To znamená, že oba Odsek 1, Dieťa 1 Odsek 2, Dieťa 2 Ak sa chcete dozvedieť viac o rozdieloch medzi Keď hovoríme o pseudotriedach, je tiež dôležité pochopiť ako sa líšia od pseudoelementov, aby sa nezmiešali. Ale zatiaľ čo používame pseudotriedy na výber prvkov HTML existujú v strome dokumentov jednoducho neoznačené samostatne, pseudo-prvky nám umožňujú zacieliť na prvky, ktoré zvyčajne neexistujú v DOM, či už vôbec (napr Je tu tiež a rozdiel v syntaxe. Pseudo-prvky sú všeobecne označené dvojitými dvojbodkami To môže viesť k nejasnostiam, ako v prípade CSS2, pseudo-prvky boli označené aj jednou dvojbodkou - prehliadače stále akceptujú jednu syntexu dvojbodky pre pseudo-elementy. Existujú tiež rozdiely medzi pseudotriedami a pseudo-prvkami v jazyku ako ich môžeme zacieliť pomocou CSS. Pseudo-prvky sa môžu zobraziť iba po sekvenciu selektorov, zatiaľ čo pseudotriedy môžu byť umiestnené kdekoľvek v sekvencii selektora CSS. Môžete napríklad zacieliť na poslednú položku zoznamu prvku zoznamu, napríklad OR Prvá sekvencia voliča vyberie posledné dieťa vo vnútri Pokúsme sa urobiť niečo podobné s pseudo-elementmi. Kód CSS uvedený vyššie je platný a text "červený" sa zobrazí po Tento kód na druhej strane nebude fungovať, ako my nemôže zmeniť pozíciu pseudo-prvku v rámci sekvencie voliča. Okrem selektora sa môže zobraziť iba jeden pseudo-prvok, zatiaľ čo pseudo-triedy môžu byť kombinované navzájom ak má kombinácia zmysel. Ak chcete napríklad zacieliť prvé podriadené prvky, ktoré sú tiež iba na čítanie, môžeme vytvoriť kombináciu pseudotried Kód voliča s Je dôležité to vedieť to sú nie Pseudotriedy CSS ktoré sú predmetom jQuery. Oni sa nazývajú jQuery rozšírenie selektora. Výbery jQuery vám umožňujú cieľové prvky HTML s jednoduchšími kľúčovými slovami. Väčšina z nich je kombináciou viacerých bežných voličov CSS, ktoré sú reprezentované jedným kľúčovým slovom.Účel pseudotriedy
.posledná identifikovať posledné prvky v rôznych rodičovských kontajneroch.
li.last text-transform: veľké; option.last font-style: italic;
.posledná triedy od predchádzajúceho posledného prvku k aktuálnemu prvku.:posledné dieťa pseudo-class je skutočne veľmi užitočná. Týmto spôsobom my nemusí uviesť posledný prvok v kóde HTML, ale môžeme ich stále štýlovať s nasledujúcou CSS: li: posledné-dieťa text-transform: veľké; možnosť: last-child font-style: italic;
Hlavné typy pseudotried
1. Dynamické pseudotriedy
:vznášať sa, : focus, : link, a : visited, ktoré môžu byť pridané do anchor tag. a: navštívené farba: # 8D20AE; . tlačidlo: hover, .button: focus font-weight: bold;
2. Pseudotriedy založené na štáte
: zaškrtnuté , ktoré možno použiť pre začiarkavacie políčka ():celá obrazovka na zacielenie na ľubovoľný prvok, ktorý sa momentálne zobrazuje v režime celej obrazovky: vypnuté pre prvky HTML, ktoré môžu byť v zablokovanom režime, ako napríklad , , a . : zaškrtnuté, ktorý označuje, či je zaškrtnuté políčko alebo nie. .začiarkavacie políčko: začiarknuté + štítok font-style: italic; vstup: zakázaný background-color: #EEEEEE;
3. Štrukturálne pseudotriedy
: Prvé dieťa, :posledné dieťa, a : N-teho dieťa (n) - všetko sa môže použiť na zacielenie konkrétneho podriadeného prvku vo vnútri kontajnera na základe jeho polohy - a : root ktorý je zameraný na nadradený rodičovský prvok v DOM. 4. Rôzne pseudotriedy
: Nie (x) ktorý vyberá prvky, ktoré sa nezhodujú s voličom x: Lang (language-code) ktorý vyberá prvky, ktorých obsah je v určitom jazyku: Dir (smerovanie) ktorý vyberá prvky s obsahom určitej smernosti (zľava doprava alebo pravá-ľavica). p: lang (ko) farba pozadia: # FFFF00; : koreň farba pozadia: # FAEBD7;
nth-child proti nth typu pseudotriedy
: Nth-child a : N-teho o type pseudo-triedy.: Nth-of-dieťa (n) zacieľuje element, ktorý je druhé dieťa svojho rodičovského prvku, a : N-teho o-typu (n) ciele druhý z nich rovnakého typu prvku (napríklad odseky) vo vnútri rodičovského elementu. / * odsek, ktorý je tiež druhým dieťaťom v jeho nadradenom prvku * / p: nth-child (2) color: # 1E90FF; // lightblue / * druhý odsek vnútri nadradeného prvku * / p: nth-of-type (2) font-weight: tučný;
Prípad 1
nth-child (2) pravidlo sa na ne nevzťahuje. Aj keď je to druhé dieťa, je to nie odsek. nth-of-typu (2) pravidlo sa bude uplatňovať, pretože toto pravidlo vyhľadáva len prvky, a nestará sa o iné typy prvkov (ako neoradené zoznamy) v rámci nadradeného prvku.nth-of-typu (2) pravidlo bude štýl druhého odseku, ktorý je Child 3.
Neuvedený zoznam 1, dieťa 2
Prípad 2
: Nth-child (2) a : N-teho o-typu (2) použijú sa pravidlá, pretože druhý odsek je tiež druhým dieťaťom jeho rodiča
Neuvedený zoznam 1, dieťa 3
: Nth-of-dieťa a : N-teho o type pseudo-triedy, CSS Tricks má skvelý príspevok na to. Ak používate SASS, Family.scss vám môže pomôcť vytvoriť zložité nth-childprvkov.Pseudotriedy vs Pseudo-prvky
pseudoprvkov, ako napr :: predtým a :: po (pozri tento návod, ako ich používať) pridali používatelia agenti, a môžu byť cielené a navrhnuté s CSS rovnako ako pseudotriedy. :: predtým a :: po) alebo iba ako určité časti existujúcich prvkov (napr ::prvé písmeno alebo :: zástupný). ::, zatiaľ čo pseudotriedy sú identifikované s jediným dvojbodkou :.1. Ich miesto v sekcii výberu CSS
ul>: last-child.red farba: # B0171F;
ul> .red: last-child farba: # B0171F;
.červená) a druhý vyberie posledné dieťa medzi prvkami, ktoré majú .červená trieda vo vnútri ul> .red :: po display: block; obsah: "červená"; farba: # B0171F;
položky triedy .červená. ul> :: after.red zobrazenie: blok; obsah: "červená"; farba: # B0171F;
2. Počet výskytov sekvencie selektora
: Prvé dieťa a :iba na čítanie nasledujúcim spôsobom: : prvé dieťa: len na čítanie color: #EEEEEE;
jQuery Výberové rozšírenia
: syntax nie vždy predstavuje správnu pseudotriedu CSS. Ak ste niekedy používali jQuery, mohli by ste používať mnoho jeho voličov : napríklad syntax $ ( ': Checkbox'), $ ( ': Input') a $ ( 'Vybrané'). / * Zmeňte písmo všetkých prvkov HTML súvisiacich so vstupom, napríklad tlačidlo, výber a vstup * / $ (": input") .css ("font-family", "new courier")
