Den slutgiltiga guiden till CSS-pseudo-klasserna
Oavsett om du är nybörjare eller en erfaren CSS-utvecklare, har du säkert hört talas om pseudo-klasser. Den mest kända pseudoklassen är förmodligen :sväva, vilket gör att vi kan ställa ett element när det är i hover-tillståndet, d.v.s. när en pekareanordning, såsom en mus, pekar på den.
Efter konceptet av våra tidigare inlägg på marginal: Auto och CSS Floats, tar vi en närmare undersökning av pseudoklasserna i detta inlägg. Vi får se vilka pseudoklasser är egentligen, hur de arbetar, hur vi kan kategorisera dem, och hur de skiljer sig från pseudo-element.
Vad är pseudoklasser?
En pseudoklass är ett nyckelord som vi kan lägga till till CSS-väljare för att definiera ett speciellt tillstånd av det tillhörande HTML-elementet. Vi kan lägga till en pseudoklass till en CSS-väljare med hjälp av kolon syntax : så här: a: svävar ...
En CSS-klass är ett attribut som vi kan lägga till i HTML-element som vi vill tillämpa samma stilregler för, till exempel topp menyalternativ eller titlar på sidbalk widgets. Med andra ord kan vi använda CSS klasser till gruppera eller klassificera HTML-element som liknar det ena eller det andra.
Pseudoklasser liknar dem i den meningen att de också är brukade lägga till stilregler till de element som delar samma egenskap.
Men medan äkta klasser är användardefinierad och kan ses i källkoden, till exempel De jobb med vanliga CSS-klasser är att klassificera eller gruppera element. Utvecklare vet hur deras element ska grupperas: de kan bilda klasser som "menyalternativ", "knappar", "miniatyrbilder" etc. för att gruppera och senare utforma liknande element. Dessa klassificeringar är baserade på elementets egenskaper som är givet av utvecklarna själva. Till exempel, om en utvecklare väljer att använda en HTML-element har dock deras egna gemensamma egenskaper baserat på deras tillstånd, position, natur och interaktion med sidan och användaren. Dessa är de egenskaper som är inte typiskt markerad i HTML-koden, men vi kan rikta dem mot pseudoklasser i CSS, till exempel: Dessa är typ av egenskaper som i allmänhet riktas mot pseudoklasserna. För att förstå skillnaden mellan klasser och pseudoklasser bättre, låt oss anta att vi använder klassen Vi kan utforma dessa sista barnelement med följande CSS: Men vad händer när det sista elementet ändras? Nåväl, vi måste flytta Denna besvär av uppdateringskurser kan lämnas till användaragenten, åtminstone för de egenskaper som är vanliga bland element (och att vara ett sista element är lika vanligt som det kan få). Har en fördefinierad Det finns många typer av pseudoklasser, alla ger oss möjligheter att rikta in element baserat på deras funktioner som annars är otillgängliga eller svårare att komma åt. Här är en lista över standard pseudoklasser i MDN. Dynamiska pseudoklasser läggs till och tas bort från HTML-element dynamiskt, baserat på det tillstånd de övergår till som svar på användarens interaktioner. Några av exemplen på dynamiska pseudoklasser är Statliga pseudoklasser läggs till element när de är i ett visst statiskt tillstånd. Några av dess mest kända exempel är: Den mest populära statsbaserade pseudoklassen måste vara Strukturella pseudoklasser klassificerar element baserade på deras position i dokumentstrukturen. De vanligaste exemplen är Det finns också diverse pseudoklasser som är svåra att klassificera, till exempel: En av de svåraste sakerna om pseudoklasser är förmodligen att förstå skillnaden mellan Båda är strukturella pseudoklasser och markering ett specifikt element inuti ett moderelement (behållare), men på ett annat sätt. Antar n är då 2 Låt oss ta en titt på ett exempel. Låt oss se hur denna korta CSS utformar HTML-filen i två olika fall. I fall 1, det andra elementet inuti a Men om moderelementet gör ha en andra stycke, I vårt exempel är Punkt 1, Barn 1 Punkt 2, barn 3 I det andra fallet flyttar vi den oordnade listan till tredje plats, och andra stycket kommer före den. Det betyder att både Punkt 1, Barn 1 Punkt 2, barn 2 Om du vill läsa mer om skillnaderna mellan När vi talar om pseudoklasser är det också viktigt att förstå hur de skiljer sig från pseudo-element, för att inte blanda dem. Men medan vi använder pseudoklasser för att välja HTML-element som det finns i dokumentträdet bara inte markerade separat, tillåter pseudo-element oss att rikta in element som finns normalt inte i DOM, antingen alls (t.ex. Det finns också en skillnad i syntaxen. Pseudo-element identifieras generellt med dubbla kolon Detta kan leda till ett förväxlingsfall som i CSS2, pseudo-element märktes med en enda kolon också - webbläsare accepterar fortfarande singel-kolonsyntaxen för pseudo-element. Det finns också skillnader mellan pseudoklasser och pseudoelement i hur vi kan rikta dem mot CSS. Pseudo-element kan bara visas efter sekvensen av selektorer, medan pseudoklasser kan placeras var som helst i CSS-väljarsekvensen. Du kan till exempel rikta in den sista listobjektet i ett listelement som ELLER Den första sekvensen av väljaren väljer det sista barnet inuti Låt oss försöka göra något liknande med pseudo-element. CSS-koden ovan är giltig och texten "röd" visas efter de Denna kod å andra sidan kommer inte att fungera, som vi kan inte ändra positionen för ett pseudoelement inuti väljarsekvensen. Dessutom kan endast ett pseudoelement visas bredvid en väljare, medan pseudoklasserna kan kombineras med varandra om kombinationen är meningsfull. Till exempel för att rikta första barnelement som också är skrivskyddade kan vi skapa en kombination av pseudoklasserna En väljarkod med a Det är viktigt att veta det dessa är inte CSS pseudoklasser som riktas mot jQuery. De kallas jQuery selector extensions. jQuery väljare förlängningar låter dig rikta HTML-element med enklare sökord. De flesta av dem är kombinationer av flera normala CSS-selektorer, vilka representeras av ett enda nyckelord.Syftet med pseudoklasserna
.sista att identifiera de sista elementen i olika föräldrabehållare.
li.last text-transform: store bokstäver; option.last font-style: italic;
.sista klass från det tidigare sista elementet till den nuvarande.:sista barnet pseudo-klass är mycket användbart faktiskt. På så sätt vi behöver inte ange det sista elementet i HTML-koden, men vi kan fortfarande stile dem med följande CSS: li: sista barn text-transform: store bokstäver; alternativ: sista barn font-style: italic;
Huvudtyper av pseudoklasser
1. Dynamiska pseudo-klasser
:sväva, :fokus, :länk, och :besökt, som alla kan läggas till ankare tagg. a: besökte färg: # 8D20AE; . knapp: svep,. knapp: fokus font-weight: bold;
2. State-Based Pseudo-Classes
:kontrollerade som kan tillämpas för kryssrutor ():fullskärm att rikta in något element som för närvarande visas i helskärmsläge:Inaktiverad för HTML-element som kan vara i funktionsläget, t.ex. , , och . :kontrollerade, vilken flaggor om en kryssruta är markerad eller inte. .kryssrutan: markerad + etikett font-style: italic; inmatning: inaktiverad bakgrundsfärg: #EEEEEE;
3. Strukturella pseudoklasser
:förstfödde, :sista barnet, och : N: te-barn (n) - alla kan användas för att rikta ett specifikt barnelement inuti en behållare baserat på sin position - och :rot som riktar sig till högsta moderelementet i DOM. 4. Diverse pseudoklasser
: Inte (x) som väljer element som inte matchar väljaren x: Lang (language-kod) som väljer element vars innehåll är i ett visst språk: Dir (riktnings) som väljer element med innehåll av en given riktning (vänster till höger eller höger till vänster). p: lang (ko) bakgrundsfärg: # FFFF00; : root bakgrundsfärg: # FAEBD7;
n: te-barn mot nth av typen Pseudo Klasser
: N: te-barn och : N: te-of-typ pseudo-klasser.: N: te-of-barn (n) riktar sig mot ett element som är andra barnet av sitt moderelement, och : N: te-of-typ (n) mål den andra bland samma typ av elementet (såsom punkter) inuti ett moderelement. / * ett stycke som också är det andra barnet inom sitt moderelement * / p: nth-child (2) color: # 1E90FF; // ljusblå / * andra stycket inuti ett moderelement * / p: nth-of-type (2) font-weight: bold;
Fall 1
n: te-barn (2) regel gäller inte för det. Även om det är ett andra barn är det det inte en paragraf. n: te-of-typ (2) regel gäller, eftersom denna regel endast söker efter element, och bryr sig inte om andra typer av element (t.ex. oorderade listor) inuti moderelementet.n: te-of-typ (2) regel kommer att utforma andra stycket som är barn 3.
Oorderad lista 1, barn 2
Fall 2
: N: te-barn (2) och den : N: te-of-typ (2) regler kommer att tillämpas, eftersom andra stycket också är det andra barnet i sin förälder
Oorderad lista 1, barn 3
: N: te-of-barn och : N: te-of-typ pseudoklasser, CSS Tricks har ett bra inlägg på den. Om du använder SASS kan Family.scss hjälpa dig att skapa komplicerade n: te-barn"omgjorda element.Pseudoklasser mot pseudo-element
Pseudo-element, som ::innan och ::efter (se denna handledning om hur man använder dem) är också tillsatt av användaragenter, och de kan riktas och utformas med CSS också, precis som pseudoklasser. ::innan och ::efter) eller endast som vissa delar av befintliga element (t.ex. ::första bokstaven eller :: platshållare). ::, medan pseudoklasser identifieras med en enda kolon :.1. Deras plats i CSS-väljarsekvensen
ul>: last-child.red färg: # B0171F;
ul> .red: sista barn färg: # B0171F;
.röd) och den andra väljer det sista barnet bland de element som har .röd klass inuti ul> .red :: efter display: block; innehåll: "röd"; färg: # B0171F;
objekt med klassen .röd. ul> :: after.red display: block; innehåll: "röd"; färg: # B0171F;
2. Antal förekomster i en väljarsekvens
:förstfödde och : Skrivskyddad på följande sätt: : första barn: skrivskyddad färg: #EEEEEE;
jQuery Selector Extensions
: syntax utgör inte alltid en riktig CSS pseudoklass. Om du någonsin har använt jQuery, kan du ha använt många av sina väljare med : syntax, till exempel $ ( ': Kryssrutan), $ ( ': Input) och $ ( ': Vald'). / * Ändra teckensnittet för alla inmatningsrelaterade HTML-element, som knapp, välj och skriv in * / $ (": input") .css ("font-family", "courier new")
