Definitivní průvodce CSS Pseudo-třídy
Ať už jste začátečník nebo zkušený vývojář CSS, pravděpodobně jste o něm slyšeli pseudo-třídy. Nejznámější pseudo-třída je pravděpodobně :vznášet se, což nám umožňuje vytvořit prvek, když je ve stavu přechodu, tj. když na něj ukazuje ukazatelové zařízení, jako je myš.
V návaznosti na koncepci našich předchozích příspěvků na marži: auto a CSS Floats se podrobněji podíváme na pseudo-třídy v tomto příspěvku. Uvidíme co pseudo-třídy opravdu jsou, jak fungují, jak je můžeme kategorizovat a jak se liší od pseudoprvků.
Co jsou to Pseudo-třídy?
Pseudo-třída je klíčové slovo, které můžeme přidat do selektorů CSS tak, aby definovat speciální stav příslušného HTML prvku. Můžeme přidat třídu pseudo-třídy do voliče CSS pomocí syntaxe dvojtečky : takhle: a: hover …
Třída CSS je atribut, který můžeme přidat do elementů HTML, které chceme aplikovat na stejná pravidla stylu, jako jsou položky top menu nebo tituly widgetů sidebar. Jinými slovy, můžeme použít třídy CSS seskupit nebo klasifikovat elementy HTML podobným způsobem.
Pseudo-třídy jsou podobné jim v tom smyslu, že jsou také slouží k přidání pravidel stylu do prvků, které sdílejí stejnou charakteristiku.
Ale zatímco pravé třídy jsou uživatelsky definovaný a může být spatřen ve zdrojovém kódu, například práce v CSS třídách je klasifikovat nebo seskupovat prvky. Vývojáři vědí, jak mají být jejich prvky seskupeny: mohou vytvářet třídy jako „položky menu“, „tlačítka“, „miniatury“ atd. Do skupiny a později podobné podobné prvky. Tyto klasifikace jsou založeny na vlastnostech prvků, které jsou dány samotnými vývojáři. Pokud se například vývojář rozhodne použít Prvky HTML však mají jejich společných charakteristik na základě jejich stavu, postavení, povahy a interakce se stránkou a uživatelem. To jsou vlastnosti, které jsou ne obvykle označeno v HTML kódu, ale můžeme zaměřte je na pseudo-třídy v CSS, například: Jedná se o takové vlastnosti, na které se obecně zaměřují pseudo třídy. Abychom lépe porozuměli rozdílu mezi třídami a pseudo-třídami, předpokládejme, že používáme třídu Tyto poslední podřízené elementy můžeme vytvořit pomocí následujících CSS: Co se však stane, když se změní poslední prvek? No, budeme muset pohnout Tento problém aktualizační třídy mohou být ponechány na agenta uživatele, přinejmenším pro ty charakteristiky, které jsou společné mezi elementy (a být poslední element je jak obyčejný jak to může dostat) \ t. Mít předdefinované Existuje mnoho druhů pseudo-tříd, všechny nám poskytují způsoby, jak cílit prvky založené na jejich vlastnostech, které jsou jinak nepřístupné nebo složitější pro přístup. Zde je seznam standardních pseudo tříd v MDN. Dynamické pseudo-třídy jsou přidávány a odstraňovány z elementů HTML dynamicky, na základě stavu, do kterého přecházejí v reakci na interakce uživatele. Některé příklady dynamických pseudo-tříd jsou Stavy založené na pseudo-třídách se přidávají k prvkům, když jsou v určitém statickém stavu. Některé z jeho nejznámějších příkladů jsou: Nejpopulárnější státní pseudo-třída musí být Strukturální pseudo-třídy třídí prvky založené na jejich pozici ve struktuře dokumentu. Jeho nejběžnější příklady jsou Tam jsou také různé pseudo-třídy, které jsou těžko klasifikovat, takový jak: \ t Jednou z nejtěžších věcí na pseudo-třídách je pravděpodobně pochopení rozdílu mezi Oba jsou strukturální pseudo-třídy a značka specifický prvek uvnitř rodičovského elementu (kontejner), ale jiným způsobem. Převzít n je 2, pak Podívejme se na příklad. Podívejme se, jak tento krátký CSS styl HTML ve dvou různých případech. V případě 1 je druhý prvek uvnitř Ale pokud je rodičovský prvek dělá mají druhý odstavec,. \ t V našem příkladu Odstavec 1, Dítě 1 Odstavec 2, Dítě 3 Ve druhém případě přesuneme neuspořádaný seznam na třetí místo a druhý odstavec před ním. To znamená, že oba Odstavec 1, Dítě 1 Odstavec 2, Dítě 2 Pokud si chcete přečíst více o rozdílech mezi Když mluvíme o pseudo-třídách, je také důležité porozumět jak se liší od pseudoprvků, aby nedošlo k jejich smíchání. Ale zatímco pseudo-třídy používáme k výběru elementů HTML, které ve stromu dokumentu Pseudo-elementy nám neumožňují samostatně označit elementy, které to jsou obvykle neexistují v DOM, buď vůbec (např K dispozici je také rozdíl v syntaxi. Pseudo-elementy jsou obecně identifikovány dvojitými dvojtečkami Toto může vést k případu zmatku jak v CSS2, pseudo-elementy byly označeny jedním dvojtečkou také - prohlížeče ještě přijímají jednu dvojtečnou syntaxi pro pseudo-elementy \ t. Tam jsou také rozdíly mezi pseudo-třídy a pseudo-elementy v způsobem, jak je můžeme cílit pomocí CSS. Pseudoprvky se mohou objevit pouze po sekvence selektorů, zatímco pseudo-třídy mohou být umístěny kdekoli v CSS selektorové sekvenci. Můžete například cílit na poslední položku seznamu prvku seznamu NEBO První posloupnost voliče vybere poslední dítě uvnitř Zkusme udělat něco podobného s pseudoprvky. Výše uvedený kód CSS je platný a zobrazí se text "červený" po Tento kód na druhou stranu nebude fungovat, jako my nemůže změnit polohu pseudoprvku uvnitř posloupnosti voliče. Vedle selektoru se může objevit pouze jeden pseudo-prvek, zatímco pseudo-třídy mohou být navzájem kombinovány pokud kombinace dává smysl. Například pro cílení na první podřízené elementy, které jsou také jen pro čtení, můžeme vytvořit kombinaci pseudo-tříd Volicí kód s a Je důležité to vědět tyto jsou ne CSS pseudo-třídy , které jsou cílené jQuery. Jsou označovány jako rozšíření jQuery. Rozšíření jQuery selector vám umožní cílové elementy HTML s jednoduššími klíčovými slovy. Většina z nich je kombinací více běžných CSS selektorů, které jsou reprezentovány jedním klíčovým slovem.Účel Pseudo-tříd
.poslední identifikovat poslední prvky v různých nadřazených kontejnerech.
li.last text-transform: uppercase; option.last font-style: kurzíva;
.poslední třídy od bývalého posledního prvku k aktuálnímu.:poslední dítě pseudo-třída je skutečně velmi užitečná. Tímto způsobem nemusíte označovat poslední prvek v HTML kódu, ale můžeme je i nadále upravovat pomocí následujících CSS: li: last-child text-transform: velká písmena; volba: last-child font-style: kurzíva;
Hlavní typy Pseudo-tříd
1. Dynamické třídy Pseudo
:vznášet se, :soustředit se, :odkaz, a : navštíveno, všechny mohou být přidány do kotevní štítek. a: navštíveno color: # 8D20AE; .button: hover, .button: focus font-weight: tučné;
2. Státní pseudotřídy
:kontrolovány které lze použít pro zaškrtávací políčka ():celá obrazovka cílit na jakýkoliv prvek, který je právě zobrazován v režimu celé obrazovky: zakázáno pro prvky HTML, které mohou být v zakázaném režimu, například , , a . :kontrolovány, který označí, zda je zaškrtávací políčko zaškrtnuto nebo ne. .checkbox: checked + label font-style: kurzíva; input: disabled background-color: #EEEEEE;
3. Strukturální třídy Pseudo-třídy
:první dítě, :poslední dítě, a : nth-child (n) - vše může být použito k cílení určitého podřízeného prvku uvnitř kontejneru na základě jeho polohy - a :vykořenit který cílí nadřazený prvek nejvyšší úrovně v DOM. 4. Různé pseudo-třídy
: ne (x) který vybere prvky, které neodpovídají voliči x: lang (kód jazyka) který vybere prvky, jejichž obsah je ve specifickém jazyce: dir (směrovost) který vybere prvky s obsahem dané směrovosti (zleva doprava nebo zprava doleva). p: lang (ko) background-color: # FFFF00; : root barva pozadí: # FAEBD7;
nth-dítě vs nth typu Pseudo-třídy
: nth-dítě a : n-tého typu pseudo-třídy.: nth-of-child (n) cílí na prvek, který je druhé dítě nadřazeného prvku, a : nth-of-type (n) cílů druhý mezi stejného typu prvku (například odstavce) uvnitř rodičovského prvku. / * odstavec, který je také druhým dítětem v jeho rodičovském prvku * / p: nth-child (2) color: # 1E90FF; // lightblue / * druhý odstavec v rodičovském prvku * / p: nth-of-type (2) font-weight: tučné;
Případ 1. \ T
n-dítě (2) pravidlo se na něj nevztahuje. Ačkoli je to druhé dítě, je to ne odstavec. n-tého typu (2) pravidlo bude platit, protože toto pravidlo pouze vyhledává prvky, a nestará se o ostatní typy elementů (například neuspořádaných seznamů) uvnitř rodičovského elementu.n-tého typu (2) pravidlo bude styl druhý odstavec, který je Child 3.
Unordered List 1, Child 2
Případ 2
: nth-dítě (2) a : n-tého typu (2) budou aplikována pravidla, protože druhý odstavec je také druhým dítětem jeho rodiče
Unordered List 1, Child 3
: nth-of-child a : n-tého typu pseudo-třídy, CSS triky má skvělý příspěvek na to. Pokud používáte SASS, Family.scss vám pomůže vytvořit komplikované nth-dítě'ified elementy.Pseudo-třídy vs Pseudo-elementy
Pseudoprvky, jako ::před a ::po (viz tento návod, jak je používat) přidány agenty uživatelů, a mohou být cílené a stylizované s CSS stejně jako pseudo-třídy. ::před a ::po) nebo pouze jako určité části existujících prvků (např ::první dopis nebo :: zástupný symbol). ::, zatímco pseudo-třídy jsou identifikovány jedním tlustým střevem :.1. Jejich umístění v CSS Selector sekvenci
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.Červené) a druhý vybírá poslední dítě mezi prvky, které mají .Červené uvnitř ul> .red :: after display: block; obsah: 'červený'; barva: # B0171F;
položek s třídou .Červené. ul> :: after.red display: block; obsah: 'červený'; barva: # B0171F;
2. Počet výskytů v posloupnosti voličů
:první dítě a :pouze ke čtení následujícím způsobem: : first-child: pouze pro čtení color: #EEEEEE;
Rozšíření jQuery Selector
: syntaxe ne vždy představuje správnou CSS pseudo-třídu. Pokud jste někdy použili jQuery, pak jste možná použili mnoho jeho selektorů : například syntaxe $ (': checkbox'), $ (': input') a $ (': selected'). / * Změnit písmo všech vstupních prvků HTML, jako je tlačítko, výběr a vstup * / $ (": input") .css ("font-family", "courier new")
