30 CSS Selektory Musíte Zapamatovat,

Naučit CSS: Kompletní Průvodce

Jsme vybudovali kompletní průvodce, aby vám pomohou naučit CSS, ať už jste právě začali se základy, nebo chcete prozkoumat více pokročilé CSS.

CSS selektory

takže jste se naučili základní id, class a descendant selektory—a pak to nazvali den? Pokud ano, přicházíte o obrovskou úroveň flexibility. Dlužíte si, abyste tyto pokročilé selektory CSS a CSS3 odevzdali do paměti.

Základní Selektory

1. *

* { margin: 0; padding: 0;}

pojďme vyřadit ty zjevné, pro začátečníky, než přejdeme k pokročilejším selektorům.

symbol hvězdy bude cílit na každý jednotlivý prvek na stránce. Mnoho vývojářů použije tento trik k vynulování margin s a padding. I když je to určitě v pořádku pro rychlé testy, Radil bych vám, abyste to nikdy nepoužívali ve výrobním kódu. To přidává příliš velkou váhu na prohlížeči, a je zbytečné.

* lze také použít s dětskými voliči.

#container * { border: 1px solid black;}

tím se zaměří na každý jednotlivý prvek, který je podřízeným #container div. Opět se snažte tuto techniku příliš nepoužívat, pokud vůbec.

2. # X

#container { width: 960px; margin: auto;}

předpona hash symbolu selektoru nám umožňuje cílit pomocí id. Toto je snadno nejběžnější použití; při použití selektorů id však buďte opatrní.

zeptejte se sami sebe: musím absolutně použít id na tento prvek, abych ho mohl zacílit?

id selektory jsou tuhé a neumožňují opětovné použití. Pokud je to možné, zkuste nejprve použít název značky, jeden z nových prvků HTML5 nebo dokonce pseudotřídu.

3. .X

.error { color: red;}

toto je volič class. Rozdíl mezi id s a class es spočívá v tom, že s těmito prvky můžete cílit na více prvků. Použijte class es, pokud chcete, aby se váš styl vztahoval na skupinu prvků. Případně použijte id s k nalezení jehly v kupce sena a upravte pouze tento konkrétní prvek.

4. X

a { color: red; }ul { margin-left: 0; }

co když chcete zacílit na všechny prvky na stránce podle jejich type namísto názvu id nebo class? Udržujte to jednoduché a použijte volič typu. Pokud potřebujete cílit na všechny neuspořádané seznamy, použijte ul {}.

živé Demo základních selektorů

Kombinátorové selektory

5. X Y

li a { text-decoration: none;}

dalším nejběžnějším voličem je volič descendant. Když potřebujete být konkrétnější se svými voliči, použijete je. Například, co když, spíše než cílení na všechny kotevní značky, stačí zacílit na kotvy, které jsou v neuspořádaném seznamu? To je konkrétně, když byste použili volič potomků.

Pro-tip: Pokud váš volič vypadá jako X Y Z A B.error, děláte to špatně. Vždy se zeptejte sami sebe, zda je naprosto nezbytné aplikovat celou tuto váhu.

6. X + Y

ul + p { color: red;}

toto se označuje jako sousední volič. Vybere pouze prvek, který bezprostředně předchází prvnímu prvku. V tomto případě bude mít červený text pouze první odstavec za každým ul.

7. X > Y

div#container > ul { border: 1px solid black;}

rozdíl mezi standardem X Y a X > Y spočívá v tom, že ten vybere pouze přímé děti. Zvažte například následující označení.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

volič #container > ul se zaměří pouze na ul s, které jsou přímými dětmi div s id container. Nebude se zaměřovat například na ul, které je dítětem prvního li.

z tohoto důvodu existují výhody při používání dětského kombinátoru. Ve skutečnosti se doporučuje zejména při práci s JavaScriptem na bázi CSS selektoru motory.

8. X ~ Y

ul ~ p { color: red;}

tento sourozenecký Kombinátor je podobný X + Y, ale je méně přísný. Zatímco sousední volič (ul + p) vybere pouze první prvek, kterému bezprostředně předchází bývalý volič, tento je obecnější. Vybere, s odkazem na náš příklad výše, všechny prvky p, pokud budou následovat ul.

živé Demo kombinačních selektorů

selektory atributů

9. X

a { color: green;}

označovaný jako selektor atributů, v našem příkladu výše vybere pouze kotevní značky, které mají atribut title. Kotevní značky, které ne, neobdrží tento konkrétní styl. Ale co když potřebujete být konkrétnější? Podívejte se na další příklad!

10. X

a { color: #83b348; /* Envato green */}

výše uvedený úryvek upraví všechny kotevní značky, které odkazují na https://code.tutsplus.com; dostanou naši značkovou zelenou barvu. Všechny ostatní kotevní značky zůstanou nedotčeny.

Všimněte si, že hodnotu balíme do uvozovek. Nezapomeňte to také provést při použití selektoru CSS JavaScriptu. Pokud je to možné, vždy používejte selektory CSS3 nad neoficiálními metodami.

to funguje dobře, i když je to trochu tuhé. Co když odkaz skutečně směřuje k Envato Tuts+, ale možná je cesta code.tutsplus.com spíše než úplná adresa URL? V těchto případech můžeme použít trochu syntaxe regulárních výrazů.

11. X

a { color: #83b348; /* Envato green */}

tam jdeme; to je to, co potřebujeme. Hvězda označuje, že hodnota postupu se musí objevit někde v hodnotě atributu. Tímto způsobem to zahrnuje tutsplus.com, code.tutsplus.com, a dokonce webdesign.tutsplus.com.

mějte na paměti, že se jedná o široké prohlášení. Co když kotva tag spojený s nějakým non-Envato stránky s řetězcem tutsplus v URL? Pokud potřebujete být konkrétnější, použijte ^ a $ pro odkaz na začátek a konec řetězce.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

někdy zajímalo, jak některé webové stránky jsou schopni zobrazit malou ikonu vedle odkazů, které jsou externí? Jsem si jistý, že jste je už viděli; jsou to pěkné připomenutí, že odkaz vás přesměruje na úplně jiný web.

Toto je cinch se symbolem karátu. Nejčastěji se používá v regulárních výrazech k označení začátku řetězce. Pokud chceme cílit na všechny kotevní značky s href, které začínají http, můžeme použít selektor podobný výše uvedenému úryvku.

Všimněte si, že nehledáme https://; to je zbytečné, a nemá účet pro adresy Url, které začínají https://.

Co kdybychom chtěli místo toho stylovat všechny kotvy, které odkazují například na fotografii? V těchto případech hledejme konec řetězce.

13. X

a { color: red;}

opět používáme symbol regulárních výrazů $, který odkazuje na konec řetězce. V tomto případě hledáme všechny kotvy, které odkazují na obrázek-nebo alespoň adresu URL, která končí .jpg. Mějte na paměti,že to nezachytí obrázky GIF a PNG.

14. X

a { color: red;}

jak kompenzujeme všechny různé typy obrázků? Mohli bychom vytvořit více selektorů, například:

a,a,a,a { color: red;}

ale to je bolest a je to neefektivní. Dalším možným řešením je použití vlastních atributů. Co kdybychom ke každé kotvě, která odkazuje na obrázek, přidali vlastní atribut data-filetype?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

pak s tímto háčkem na místě můžeme použít standardní selektor atributů k cílení pouze na tyto kotvy.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

zde je speciální, který zapůsobí na vaše přátele. O tomto triku neví příliš mnoho lidí. Symbol vlnovky (~) nám umožňuje cílit na atribut, který má seznam hodnot oddělený mezerami.

spolu s naším vlastním atributem z výše uvedeného čísla 15 bychom mohli vytvořit atribut data-info, který může přijímat seznam všeho, co potřebujeme poznamenat, oddělený mezerami. V tomto případě si všimneme externích odkazů a odkazů na obrázky-jen pro příklad.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

s tímto značkováním na místě, nyní můžeme cílit na všechny značky, které mají některou z těchto hodnot, pomocí triku selektoru atributů ~.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

docela šikovný, co?

živé Demo selektorů atributů

Pseudo selektory

16. X: navštívil A X:odkaz

a:link { color: red; }a:visited { color: purple; }

pseudotřídu :link používáme k cílení všech kotevních značek, na které ještě nebylo kliknuto.

alternativně máme také pseudo třídu :visited, která, jak byste očekávali, nám umožňuje použít specifický styl pouze na kotevní značky na stránce, na které bylo kliknuto nebo „navštíveno“.

17. X: zaškrtnuto

input:checked { border: 1px solid black;}

tato pseudo třída se zaměří pouze na prvek uživatelského rozhraní, který byl zaškrtnut—jako přepínač nebo zaškrtávací políčko. Je to tak jednoduché.

18. X: po

jsou pseudo třídy before a after skvělé. Každý den, Zdá se, lidé hledají nové a kreativní způsoby, jak je efektivně využívat. Jednoduše generují obsah kolem vybraného prvku.

mnoho z nich bylo poprvé představeno těmto třídám, když narazili na hack clear-fix.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

tento hack používá pseudo třídu :after k připojení mezery za prvek a jeho vymazání. Je to vynikající trik, který máte v tašce na nářadí, zejména v případech, kdy metoda overflow: hidden; není možná.

pro další kreativní použití tohoto, viz můj rychlý tip na vytváření stínů.

podle specifikace CSS3 Selectors byste měli technicky použít pseudo element syntaxi dvou dvojteček ::. Nicméně, zůstat kompatibilní, user-agent bude akceptovat jedno použití dvojtečka stejně.

19. X: vznášet

div:hover { background: #e3e3e3;}

Oh pojď. Tuhle znáš. Oficiální termín pro toto je „pseudo třída akce uživatele“. Zní to matoucí, ale ve skutečnosti to není. chcete použít konkrétní styl, když se uživatel vznáší nad prvkem? To bude mít svou práci!

mějte na paměti, že starší verze aplikace Internet Explorer neodpovídají, když je pseudo třída :hover použita na cokoli jiného než na značku kotvy.

tento volič budete nejčastěji používat, když použijete například border-bottom na kotevní značky, když se vznášíte.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; vypadá lépe než text-decoration: underline;.

20. X: ne (selektor)

div:not(#container) { color: blue;}

pseudotřída negace je obzvláště užitečná. Řekněme, že chci vybrat všechny div s, s výjimkou toho, který má id container. Výše uvedený úryvek zvládne tento úkol dokonale.

nebo, pokud bych chtěl vybrat každý jednotlivý prvek (nedoporučuje se) s výjimkou značek odstavců, mohli bychom to udělat:

*:not(p) { color: green;}

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

můžeme použít pseudo elementy (označené ::) pro styl fragmentů prvku, jako je první řádek nebo první písmeno. Mějte na paměti, že tyto prvky musí být aplikovány na prvky na úrovni bloků, aby se projevily.

pseudo-prvek se skládá ze dvou dvojteček: ::

Cíl První Písmeno Odstavce

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Tento úryvek je abstrakce, která bude najít všechny odstavce na stránce, a pak dílčí cíl pouze první písmeno tohoto prvku.

toto se nejčastěji používá k vytvoření novinového stylu pro první písmeno článku.

Cíl První Řádek Odstavce

p::first-line { font-weight: bold; font-size: 1.2em;}

Podobně ::first-line pseudo element bude, jak se dalo očekávat, styl prvního řádku prvku.

„Pro kompatibilitu s existující styl listů, uživatelské agenty, musí rovněž akceptovat předchozí-tlustého střeva zápis pro pseudo-prvky zavedené v CSS úrovně 1 a 2 (tj., :first-line, :first-letter, :before a :after). Tato kompatibilita není povolena pro nové pseudo-prvky zavedené v této specifikaci.“- W3C selektory SPECIFIKACE

živé Demo Pseudo selektorů

Nth podřízené a typové selektory

22. X: n-dítě (n)

li:nth-child(3) { color: red;}

Vzpomínáte si na dny, kdy jsme neměli způsob, jak cílit na konkrétní prvky v zásobníku? Pseudo třída nth-child to řeší!

Vezměte prosím na vědomí, že nth-child přijímá celé číslo jako parametr, ale toto není založeno na nule. Pokud chcete zacílit na druhou položku seznamu, použijte li:nth-child(2).

můžeme to dokonce použít k výběru proměnné sady dětí. Například bychom mohli li:nth-child(4n) vybrat každou čtvrtou položku seznamu.

23. X: n-poslední dítě (n)

li:nth-last-child(2) { color: red;}

co kdybyste měli obrovský seznam položek v ul a potřebovali jste pouze přístup, řekněme, třetí až poslední položku? Spíše než dělat li:nth-child(397), můžete místo toho použít pseudo třídu nth-last-child.

tato technika funguje téměř identicky s číslem 16 výše. Rozdíl je v tom, že začíná na konci sbírky a pracuje zpět.

24. X:n-tého typu (n)

ul:nth-of-type(3) { border: 1px solid black;}

budou chvíle, kdy místo výběru child musíte místo toho vybrat podle type prvku.

Představte si značku, která obsahuje pět neuspořádaných seznamů. Pokud jste chtěli styl pouze třetí ul, a neměl jedinečný id připojit do, Můžete použít nth-of-type(n) pseudo třídu. Ve výše uvedeném úryvku bude mít ohraničení pouze třetí ul.

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

A ano, zůstat konzistentní, můžeme také použít nth-last-of-type začít na konci selektory seznamu a práci si cestu zpět do cíle požadovaný prvek.

26. X: first-child

ul li:first-child { border-top: none;}

tato strukturální pseudo třída nám umožňuje cílit pouze na první dítě rodiče prvku. Často to budete používat k odstranění okrajů z první a poslední položky seznamu.

řekněme například, že máte seznam řádků a každý z nich má border-top a border-bottom. S tímto uspořádáním bude první a poslední položka v této sadě vypadat trochu divně.

mnoho návrhářů používá třídy first a last, aby to kompenzovalo. Místo toho můžete použít tyto pseudo třídy.

27. X: poslední dítě

ul > li:last-child { color: green;}

opak first-child, last-child se zaměří na poslední položku rodiče prvku.

last-child Selector Example

pojďme vytvořit jednoduchý příklad demonstrovat jedno možné použití těchto tříd. Vytvoříme stylizovanou položku seznamu.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

pro označení není nic zvláštního: jen jednoduchý seznam.

Tady je CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

Tento styl se nastavit pozadí, odstranit výchozí prohlížeč polstrování na ul, a aplikovat hranice, aby každý li poskytnout trochu hloubky.

Chcete-li do seznamů Přidat hloubku, použijte border-bottom na každý li odstín nebo dva tmavší než barva pozadí li. Dále použijte border-top, což je o několik odstínů světlejší.

jediný problém, jak je znázorněno na obrázku výše, je, že hranice bude použita na velmi horní a dolní části nečíslovaný seznam—což vypadá divně. Použijme pseudo třídy :first-child a :last-child, abychom to opravili.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

tam jdeme; to opravuje!

28. X: pouze dítě

div p:only-child { color: red;}

po pravdě řečeno, pravděpodobně nebudete příliš často používat pseudo třídu only-child. Nicméně je k dispozici, pokud ji potřebujete.

umožňuje cílit na prvky, které jsou jediným dítětem jeho rodiče. Například s odkazem na výše uvedený úryvek bude červeně zbarven pouze odstavec, který je jediným dítětem div.

předpokládejme následující označení.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

v tomto případě nebudou zacíleny druhé odstavce div; pouze první div. Jakmile na prvek použijete více než jedno dítě, pseudo třída only-child přestane platit.

29. X: pouze typu

li:only-of-type { font-weight: bold;}

tato strukturální pseudo třída může být použita některými chytrými způsoby. Zaměří se na prvky, které nemají v nadřazeném kontejneru žádné sourozence. Jako příklad se zaměřme na všechny uls, které mají pouze jednu položku seznamu.

nejprve se zeptejte sami sebe, jak byste tento úkol splnili. Můžete to udělat ul li, ale to by se zaměřilo na všechny položky seznamu. Jediným řešením je použití only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: první typ

pseudo třída first-of-type umožňuje vybrat první sourozence svého typu.

Test

abychom tomu lépe porozuměli, uděláme si test. Zkopírujte následující značky do editoru kódu:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

nyní, aniž byste si přečetli další, zkuste zjistit, jak cílit pouze na „seznam položek 2“. Když jste na to přišli (nebo se vzdali), čtěte dál.

řešení 1

existuje celá řada způsobů, jak tento test vyřešit. Přezkoumáme několik z nich. Začněme použitím first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

tento úryvek v podstatě říká, že chcete-li najít první neuspořádaný seznam na stránce, najděte pouze bezprostřední děti, což jsou položky seznamu. Dále filtrujte pouze na druhou položku seznamu v této sadě.

řešení 2

další možností je použít sousední volič.

p + ul li:last-child { font-weight: bold;}

v tomto scénáři najdeme ul, která okamžitě pokračuje ve značce p, a pak najdeme poslední dítě prvku.

Řešení 3

s těmito selektory můžeme být tak nepříjemní nebo hraví, jak chceme.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

tentokrát chytíme první ul na stránce a pak najdeme první položku seznamu,ale počínaje zdola!

Live Demo N-tého Dítěte a Typ Voliče

Závěr

Pokud jste zušlechtěné pro starší prohlížeče, jako je Internet Explorer 6, stále musíte být opatrní při používání těchto novějších voliče. Ale prosím, nenechte se tím odradit od toho, abyste se je naučili. Udělal bys pro sebe obrovskou službu. Nezapomeňte se zde podívat na seznam kompatibility prohlížeče. Případně můžete použít vynikající IE9 Deana Edwarda.JS script přinést podporu pro tyto selektory starších prohlížečů.

za druhé, při práci s knihovnami JavaScriptu, jako je populární jQuery, se vždy pokuste použít tyto nativní selektory CSS3 nad vlastními metodami/selektory knihovny, pokud je to možné. Váš kód bude rychlejší, protože volič může používat nativní analýzu prohlížeče, spíše než jeho vlastní.

je skvělé, že trávíte čas učením základů webového designu, ale pokud potřebujete rychlé řešení, jedna z našich šablon CSS připravených k použití může být dobrou volbou. Máme také několik prémiových položek CSS, které můžete zvážit.

• 
  CSS3
  15 Elegantní CSS Ceny Tabulky pro Svůj Nejnovější Web Projektu
  Monty Shokeen
• 
  Bootstrap 4
  18 Nejlepší Bootstrap 4 Pluginy
  Monty Shokeen

Volný Přístup k Envato Prvků na 1 Měsíc

a Konečně, tady je velmi speciální nabídku, aby vám pomohou vytvořit profesionálně vypadající stránky a aplikace. Stejně jako použití těchto selektorů CSS, proč nevyužít vysoce kvalitní fotografie, videozáznamy, prémiová písma, grafika, ilustrace, a více?

normálně byste za takové zdroje museli platit. Ale právě teď máte přístup k milionům kreativních aktiv pro vaše kódovací projekty po celý měsíc, zcela zdarma. A co víc, získáte neomezené stahování, takže během tohoto měsíce můžete chytit tolik, kolik chcete, a platit, pouze pokud se rozhodnete pokračovat!

Chcete-li využít této nabídky, klikněte na tento speciální registrační odkaz nebo zadejte kód níže na registrační stránce:

elements_cont_tuts-freemonth1-4bwkbp

nečekejte příliš dlouho-nabídka platí pouze po omezenou dobu!