De 30 CSS-vælgere, du skal huske

Lær CSS: den komplette Guide

vi har bygget en komplet guide til at hjælpe dig med at lære CSS, uanset om du lige er kommet i gang med det grundlæggende, eller du vil udforske mere avanceret CSS.

CSS selektorer

så du lærte basen id, class og descendant selektorer—og så kaldte det en dag? I så fald går du glip af en enorm grad af fleksibilitet. Du skylder dig selv at forpligte disse avancerede CSS-og CSS3-vælgere til hukommelsen.

Grundlæggende Selektorer

1. *

* { margin: 0; padding: 0;}

lad os slå de åbenlyse ud for begyndere, inden vi går videre til de mere avancerede vælgere.

stjernesymbolet vil målrette mod hvert enkelt element på siden. Mange udviklere vil bruge dette trick til nul ud margins og padding. Selvom dette bestemt er fint til hurtige test, vil jeg råde dig til aldrig at bruge dette i produktionskode. Det tilføjer for meget vægt på bro.ser, og er unødvendig.

* kan også bruges med børnevælgere.

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

dette vil målrette mod hvert enkelt element, der er et barn af #containerdiv. Igen, prøv ikke at bruge denne teknik meget, hvis nogensinde.

2. #

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

ved at sætte hash-symbolet på en vælger kan vi målrette med id. Dette er let den mest almindelige brug; vær dog forsigtig, når du bruger id vælgere.

spørg dig selv: skal jeg absolut anvende en id på dette element for at målrette det?

id selektorer er stive og tillader ikke genbrug. Hvis det er muligt, skal du først prøve at bruge et tagnavn, et af de nye HTML5-elementer eller endda en pseudoklasse.

3. .

.error { color: red;}

dette er en class vælger. Forskellen mellem ids og class es er, at du med sidstnævnte kan målrette mod flere elementer. Brug class es, når du vil have din styling til at gælde for en gruppe af elementer. Alternativt kan du bruge id s til at finde en nål i en høstak og kun style det specifikke element.

4.

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

hvad hvis du vil målrette mod alle elementer på en side i henhold til deres type snarere end et ideller class navn? Hold det enkelt, og brug en typevælger. Hvis du har brug for at målrette mod alle uordnede lister, skal du bruge ul {}.

live Demo af grundlæggende vælgere

Kombinatorvælgere

5.

li a { text-decoration: none;}

den næste mest almindelige vælger er descendant vælgeren. Når du skal være mere specifik med dine vælgere, bruger du disse. For eksempel, hvad hvis du i stedet for at målrette mod alle ankerkoder kun behøver at målrette mod ankrene, der er inden for en uordnet liste? Dette er specifikt, når du bruger en efterkommer-vælger.

Pro-tip: Hvis din vælger ligner X Y Z A B.error, gør du det forkert. Spørg altid dig selv, om det er absolut nødvendigt at anvende al den vægt.

6. 8168 >

ul + p { color: red;}

dette kaldes en tilstødende vælger. Det vælger kun det element, der umiddelbart går forud for det tidligere element. I dette tilfælde vil kun første afsnit efter hver ul have rød tekst.

7. > Y

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

forskellen mellem standarden X Y og X > Y er, at sidstnævnte kun vælger direkte børn. Overvej for eksempel følgende markering.

 <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>

en vælger på #container > ulvil kun målrette mod ul s, som er direkte børn af div med en idaf container. Det vil ikke målrette for eksempel ul, der er et barn af den første li.

af denne grund er der præstationsfordele ved brug af barnekombinatoren. Faktisk anbefales det især, når du arbejder med JavaScript-baserede CSS-vælgermotorer.

8.

ul ~ p { color: red;}

denne søskendekombinator svarer til X + Y, men den er mindre streng. Mens en tilstødende vælger (ul + p) kun vælger det første element, der umiddelbart går forud for den tidligere vælger, er denne mere generaliseret. Det vil vælge, med henvisning til vores eksempel ovenfor, nogen p elementer, så længe de følger en ul.

live Demo af Kombinatorvælgere

Attributvælgere

9.

a { color: green;}

omtalt som en attributvælger, i vores eksempel ovenfor, vil dette kun vælge de ankerkoder, der har en title attribut. Anker tags, som ikke vil ikke modtage denne særlige styling. Men hvad nu hvis du skal være mere specifik? Tjek det næste eksempel!

10.

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

uddraget ovenfor vil style alle ankerkoder, der linker til https://code.tutsplus.com; de vil modtage vores mærkevarer grøn farve. Alle andre anker tags vil forblive upåvirket.

Bemærk, at vi indpakker værdien i anførselstegn. Husk også at gøre dette, når du bruger en JavaScript CSS selector engine. Når det er muligt, skal du altid bruge CSS3-vælgere over uofficielle metoder.

dette fungerer godt, selvom det er lidt stift. Hvad hvis linket faktisk direkte til Envato Tuts+, men måske er stien code.tutsplus.com i stedet for den fulde URL? I disse tilfælde kan vi bruge lidt af syntaksen for regulære udtryk.

11.

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

der går vi; det er hvad vi har brug for. Stjernen angiver, at procedureværdien skal vises et sted i attributtens værdi. På den måde dækker dette tutsplus.com, code.tutsplus.com, og endda webdesign.tutsplus.com.

Husk, at dette er en bred erklæring. Hvad hvis ankeret tag knyttet til nogle ikke-Envato site med strengen tutsplus i URL ‘ en? Når du skal være mere specifik, skal du bruge ^ og $ til at henvise til henholdsvis begyndelsen og slutningen af en streng.

12.

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

har du nogensinde spekuleret på, hvordan nogle hjemmesider kan vise et lille ikon ved siden af de links, der er eksterne? Jeg er sikker på, at du har set disse før; de er gode påmindelser om, at linket vil lede dig til en helt anden hjemmeside.

dette er en film med karatsymbolet. Det er mest almindeligt anvendt i regulære udtryk til at betegne begyndelsen af en streng. Hvis vi ønsker at målrette mod alle ankerkoder, der har en href, der begynder med http, kunne vi bruge en vælger svarende til uddraget vist ovenfor.

Bemærk, at vi ikke søger efter https://; det er unødvendigt og tager ikke højde for de URL ‘ er, der begynder med https://.

hvad nu, hvis vi i stedet ville style alle ankre, der linker til, siger, et foto? I disse tilfælde, lad os søge efter slutningen af strengen.

13.

a { color: red;}

igen bruger vi et regulært udtryk symbol, $, for at henvise til slutningen af en streng. I dette tilfælde søger vi efter alle ankre, der linker til et billede—eller i det mindste en URL, der slutter med .jpg. Husk, at dette ikke fanger GIF-og PNG-billeder.

14.

a { color: red;}

hvordan kompenserer vi for alle de forskellige billedtyper? Nå, vi kunne oprette flere vælgere, såsom:

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

men det er en smerte, og det er ineffektivt. En anden mulig løsning er at bruge brugerdefinerede attributter. Hvad hvis vi tilføjede vores egen data-filetype attribut til hvert anker, der linker til et billede?

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

derefter kan vi med den krog på plads bruge en standard attributvælger til kun at målrette mod disse ankre.

a { color: red;}

15.

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

her er en speciel en, der vil imponere dine venner. Ikke mange mennesker kender til dette trick. Symbolet tilde (~) giver os mulighed for at målrette mod en attribut, der har en rumsepareret liste over værdier.

ved at gå sammen med vores brugerdefinerede attribut fra nummer 15 ovenfor kunne vi oprette en data-info attribut, som kan modtage en mellemrum adskilt liste over alt, hvad vi har brug for at notere. I dette tilfælde noterer vi Eksterne links og links til billeder—bare for eksempel.

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

med denne markering på plads kan vi nu målrette mod alle tags, der har en af disse værdier, ved at bruge ~ attributvælger trick.

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

smuk nifty, hva?

Live Demo af attribut selektorer

Pseudo selektorer

16. S: besøg og S:link

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

vi bruger pseudoklassen :link til at målrette mod alle ankerkoder, der endnu ikke er klikket på.

alternativt har vi også pseudoklassen :visited, som, som du kunne forvente, giver os mulighed for kun at anvende specifik styling på ankerkoderne på siden, der er blevet klikket på eller “besøgt”.

17.

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

denne pseudoklasse målretter kun mod et brugergrænsefladeelement, der er markeret—som en radioknap eller afkrydsningsfelt. Så enkelt er det.

18. Efter

pseudoklasserne before og after er store. Hver dag ser det ud til, at folk finder nye og kreative måder at bruge dem effektivt på. De genererer simpelthen indhold omkring det valgte element.

mange blev først introduceret til disse klasser, da de stødte på den klare rettelse hack.

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

dette hack bruger pseudoklassen :after til at tilføje et mellemrum efter elementet og derefter rydde det. Det er et glimrende trick at have i din værktøjspose, især i de tilfælde, hvor overflow: hidden; – metoden ikke er mulig.

for en anden kreativ brug af dette, se mit hurtige tip om oprettelse af skygger.

i henhold til CSS3 Selectors-specifikationen skal du teknisk bruge pseudoelementsyntaksen for to koloner ::. For at forblive kompatibel accepterer brugeragenten dog også en enkelt kolonbrug.

19.

div:hover { background: #e3e3e3;}

Åh kom nu. Du kender den her. Den officielle betegnelse for dette er”brugerhandlings pseudoklasse”. Det lyder forvirrende, men det er det virkelig ikke. vil du anvende specifik styling, når en bruger svæver over et element? Dette vil få arbejdet gjort!

Husk, at ældre versioner af Internetudforsker ikke reagerer, når pseudoklassen :hover anvendes på andet end et ankertag.

du bruger oftest denne vælger, når du f.eks. anvender en border-bottom til at forankre tags, når du svæver over.

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

Pro-tip: border-bottom: 1px solid black; ser bedre ud end text-decoration: underline;.

20. Ikke (selector)

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

negation pseudoklassen er særlig nyttig. Lad os sige, at jeg vil vælge alle divs, bortset fra den der har et id på container. Uddraget ovenfor håndterer denne opgave perfekt.

eller hvis jeg ønskede at vælge hvert enkelt element (ikke anbefalet) bortset fra afsnit tags, kunne vi gøre:

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

21. PS:: pseudoElement

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

vi kan bruge pseudoelementer (udpeget af ::) til at style fragmenter af et element, såsom den første linje eller det første bogstav. Husk, at disse skal anvendes på elementer på blokniveau for at træde i kraft.

et pseudoelement består af to koloner: ::

Målret mod det første bogstav i et afsnit

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

dette uddrag er en abstraktion, der finder alle afsnit på siden og derefter kun undermålretter mod det første bogstav i dette element.

dette bruges oftest til at oprette avislignende styling til det første bogstav i en artikel.

mål den første linje i et afsnit

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

tilsvarende vil ::first-line pseudoelementet som forventet kun style elementets første linje.

” for kompatibilitet med eksisterende stilark skal brugeragenter også acceptere den forrige en-kolonnotation for pseudoelementer introduceret i CSS-niveau 1 og 2 (nemlig, :first-line, :first-letter, :before og :after). Denne kompatibilitet er ikke tilladt for de nye pseudoelementer, der introduceres i denne specifikation.”- V3C selektorer Specs

Live Demo af Pseudo selektorer

Nth barn og type selektorer

22. N: nth-barn (n)

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

Husk de dage, hvor vi ikke havde nogen måde at målrette mod specifikke elementer i en stak? Pseudoklassen nth-child løser det!

bemærk, at nth-child accepterer et heltal som en parameter, men dette er ikke nulbaseret. Hvis du vil målrette mod det andet listeelement, skal du bruge li:nth-child(2).

vi kan endda bruge dette til at vælge et variabelt sæt børn. For eksempel kunne vi gøre li:nth-child(4n) for at vælge hvert fjerde listeelement.

23. Nth-last-child (n)

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

hvad hvis du havde en enorm liste over emner i en ul, og du kun havde brug for at få adgang til, siger den tredje til sidste vare? I stedet for at gøre li:nth-child(397), kan du i stedet bruge pseudoklassen nth-last-child.

denne teknik fungerer næsten identisk med nummer 16 ovenfor. Forskellen er, at den begynder i slutningen af samlingen og arbejder sig tilbage.

24. Nth-of-type (n)

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

der vil være tidspunkter, hvor du i stedet for at vælge en child i stedet skal vælge i henhold til elementets type.

Forestil dig markering, der indeholder fem uordnede lister. Hvis du kun ville style den tredje ul og ikke havde en unik id at tilslutte dig, Kunne du bruge pseudoklassen nth-of-type(n). I uddraget ovenfor vil kun den tredje ul have en grænse omkring den.

25. Nth-last-of-type (n)

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

og ja, for at forblive konsistent kan vi også bruge nth-last-of-type til at begynde i slutningen af vælgerlisten og arbejde os tilbage for at målrette mod det ønskede element.

26.

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

denne strukturelle pseudoklasse giver os mulighed for kun at målrette mod det første barn af elementets forælder. Du bruger ofte dette til at fjerne grænser fra de første og sidste listeelementer.

lad os for eksempel sige, at du har en liste over rækker, og hver har en border-topog en border-bottom. Nå, med det arrangement vil det første og sidste element i det sæt se lidt underligt ud.

mange designere anvender klasser på first og last for at kompensere for dette. I stedet kan du bruge disse pseudoklasser.

27.

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

det modsatte af first-child, last-child vil målrette mod det sidste element i elementets forælder.

last-child Vælgereksempel

lad os bygge et simpelt eksempel for at demonstrere en mulig brug af disse klasser. Vi opretter et stylet listeelement.

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

til markeringen er der ikke noget særligt: bare en simpel liste.

her er 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;}

denne styling vil sætte en baggrund, fjerne bro. ser standard polstring på ul, og anvende grænser til hver li for at give en smule dybde.

for at tilføje dybde til dine lister skal du anvende en border-bottom på hver li, der er en skygge eller to mørkere end libaggrundsfarve. Anvend derefter en border-top, som er et par nuancer lettere.

det eneste problem, som vist på billedet ovenfor, er, at en kant vil blive anvendt helt øverst og nederst på den uordnede liste—hvilket ser underligt ud. Lad os bruge pseudoklasserne :first-child og :last-child til at løse dette.

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

der går vi; der løser det!

28.

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

sandfærdigt vil du sandsynligvis ikke finde dig selv ved at bruge pseudoklassen only-child for ofte. Ikke desto mindre er det tilgængeligt, hvis du har brug for det.

det giver dig mulighed for at målrette elementer, som er det eneste barn af sin forælder. For eksempel, der henviser til uddraget ovenfor, er det kun det afsnit, der er det eneste barn i div, der bliver farvet rødt.

lad os antage følgende markering.

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

i dette tilfælde vil det andet divs afsnit ikke blive målrettet; kun det første div. Så snart du anvender mere end et barn på et element, ophører pseudoklassen only-child med at træde i kraft.

29.

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

denne strukturelle pseudoklasse kan bruges på nogle smarte måder. Det vil målrette elementer, der ikke har nogen søskende i sin forælder container. Lad os som et eksempel målrette mod alle uls, der kun har et enkelt listeelement.

spørg dig selv først, hvordan du ville udføre denne opgave. Du kunne gøre ul li, men dette ville målrette mod alle listeelementer. Den eneste løsning er at bruge only-of-type.

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

30.

pseudoklassen first-of-type giver dig mulighed for at vælge de første søskende af sin type.

en Test

for bedre at forstå dette, lad os få en test. Kopier følgende markering til din kodeditor:

<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>

nu, uden at læse videre, prøv at finde ud af, hvordan du kun målretter mod “listeelement 2”. Når du har fundet ud af det (eller givet op), læs videre.

løsning 1

der er forskellige måder at løse denne test på. Vi gennemgår en håndfuld af dem. Lad os begynde med at bruge first-of-type.

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

dette uddrag siger i det væsentlige, at finde den første uordnede liste på siden, så find kun de umiddelbare børn, som er listeelementer. Dernæst filtrer det ned til kun det andet listeelement i det sæt.

løsning 2

en anden mulighed er at bruge den tilstødende vælger.

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

i dette scenario finder vi ul, der straks fortsætter p tagget, og finder derefter elementets allerførste barn.

løsning 3

vi kan være så modbydelige eller så legende, som vi vil med disse vælgere.

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

denne gang tager vi den første ul på siden og finder derefter det allerførste listeelement, men starter fra bunden!

live Demo af Nth børne-og Typevælgere

konklusion

hvis du kompenserer for ældre bro.sere, som Internetudforsker 6, skal du stadig være forsigtig, når du bruger disse nyere vælgere. Men lad det ikke afskrække dig fra at lære disse. Du ville gøre dig selv en bjørnetjeneste. Sørg for at henvise her til en liste over bro.ser-Kompatibilitet. Alternativt kan du bruge Dean Edvards fremragende IE9.JS script til at bringe støtte til disse vælgere til ældre bro.sere.

for det andet, når du arbejder med JavaScript-biblioteker, som det populære spørgsmål, skal du altid prøve at bruge disse native CSS3-vælgere over bibliotekets brugerdefinerede metoder/vælgere, når det er muligt. Det vil gøre din kode hurtigere, da vælgermotoren kan bruge bro.sererens oprindelige parsing snarere end sin egen.

det er dejligt, at du bruger tid på at lære grundlæggende design, men hvis du har brug for en hurtig løsning, kan en af vores klar-til-brug CSS-skabeloner være en god mulighed. Vi har også et par premium CSS-emner, som du kan overveje.

• 
  CSS3
  15 elegante CSS Prissætningstabeller til dit seneste projekt
  Monty Shokeen
• 
  Bootstrap 4
  18 bedste Bootstrap 4 Plugins
  Monty Shokeen

Gratis adgang til Envato Elements i 1 måned

endelig er her et meget specielt tilbud, der hjælper dig med at opbygge professionelle sider og apps. Ud over at bruge disse CSS-vælgere, hvorfor ikke drage fordel af stockfotos i høj kvalitet, videooptagelser, premium-skrifttyper, grafik, illustrationer og mere?

normalt skal du betale for ressourcer som det. Men lige nu Kan du få adgang til millioner af kreative aktiver til dine kodningsprojekter i en hel måned, helt gratis. Og hvad mere er, du får ubegrænsede overførsler, så du kan få fat i så meget som du vil i løbet af den måned og kun betale, hvis du beslutter dig for at fortsætte!

for at drage fordel af dette tilbud skal du klikke på dette specielle tilmeldingslink eller indtaste koden nedenfor på registreringssiden:

elements_cont_tuts-freemonth1-4bwkbp

vent ikke for længe-tilbuddet er kun gyldigt i en begrænset periode!