De definitieve handleiding voor CSS-pseudo-klassen
Of u nu een beginnende of ervaren CSS-ontwikkelaar bent, u hebt waarschijnlijk wel van gehoord pseudo-classes. De meest bekende pseudo-klasse is waarschijnlijk : hover, waarmee we een element kunnen stijlen als het dat is in de hover-status, d.w.z. wanneer een aanwijsapparaat, zoals een muis, erop wijst.
Naar aanleiding van het concept van onze vorige berichten op marge: auto en CSS Floats, nemen we een diepgaandere blik op pseudo-klassen in dit bericht. We zullen zien wat pseudo-klassen echt zijn, hoe ze werken, hoe we ze kunnen categoriseren, en hoe ze verschillen van pseudo-elementen.
Wat zijn pseudo-klassen?
Een pseudo-klasse is een sleutelwoord dat we aan CSS-selectors kunnen toevoegen om een speciale staat definiëren van het bijbehorende HTML-element. We kunnen een pseudo-klasse toevoegen aan een CSS-selector met behulp van de dubbele syntaxis : zoals dit: a: hover ...
Een CSS-klasse is een attribuut dat we kunnen toevoegen aan HTML-elementen waarvoor we dezelfde stijlregels willen toepassen, zoals hoofdmenu-items of titels van zijbalk-widgets. Met andere woorden, we kunnen CSS-klassen gebruiken om groepeer of classificeer HTML-elementen die op een of andere manier vergelijkbaar zijn.
Pseudo-klassen zijn vergelijkbaar met hen in de zin dat ze dat ook zijn gebruikt om stijlregels toe te voegen aan de elementen met dezelfde eigenschap.
Maar terwijl echte klassen zijn gebruiker gedefinieerde en kan worden gespot in de broncode, bijvoorbeeld De taak van reguliere CSS-klassen is om elementen classificeren of groeperen. Ontwikkelaars weten hoe hun elementen moeten worden gegroepeerd: ze kunnen klassen zoals 'menu-items', 'knoppen', 'miniaturen', enz. Vormen om dezelfde elementen te groeperen en later te stijlen. Deze classificaties zijn gebaseerd op de kenmerken van de elementen die dat zijn gegeven door de ontwikkelaars zelf. Bijvoorbeeld, als een ontwikkelaar beslist om een te gebruiken HTML-elementen hebben echter hun eigen gemeenschappelijke kenmerken op basis van hun staat, positie, aard en interactie met de pagina en de gebruiker. Dit zijn de kenmerken die dat zijn niet meestal gemarkeerd in de HTML-code, maar we kunnen richt hen met pseudo-klassen in CSS, bijvoorbeeld: Dit zijn de kenmerken die in het algemeen het doelwit zijn van de pseudo-klassen. Om het verschil tussen klassen en pseudo-klassen beter te begrijpen, gaan we ervan uit dat we de klas gebruiken We kunnen deze laatste onderliggende elementen opmaken met de volgende CSS: Maar wat gebeurt er wanneer het laatste element verandert? Welnu, we zullen het moeten verplaatsen Dit gedoe van het bijwerken van klassen kan worden overgelaten aan de user-agent, tenminste voor die karakteristieken die gebruikelijk zijn onder elementen (en als laatste element is het zo gewoon als het kan krijgen). Het hebben van een vooraf gedefinieerde Er zijn veel soorten pseudo-klassen, allemaal bieden ze manieren om elementen te targeten op basis van hun functies die anders ontoegankelijk of moeilijker te benaderen zijn. Hier is een lijst met standaard pseudo-klassen in MDN. Dynamische pseudo-klassen worden toegevoegd aan en verwijderd uit HTML-elementen dynamisch, gebaseerd op de staat waarin ze overstappen in reactie op de interacties van de gebruiker. Enkele van de voorbeelden van dynamische pseudoklassen zijn Op status gebaseerde pseudo-klassen worden toegevoegd aan elementen wanneer ze dat zijn in een bepaalde statische toestand. Enkele van de meest bekende voorbeelden zijn: De meest populaire op staat gebaseerde pseudo-klasse moet zijn Structurele pseudo-klassen classificeren elementen op basis op hun positie in de documentstructuur. De meest voorkomende voorbeelden zijn Er zijn ook diverse pseudo-klassen die moeilijk te classificeren zijn, zoals: Een van de moeilijkste dingen over pseudo-klassen is waarschijnlijk het verschil begrijpen tussen de Beide zijn structurele pseudoklassen en markeren een specifiek element binnen een bovenliggend element (container), maar op een andere manier. Uitgaan van n is 2 dan Laten we een voorbeeld bekijken. Laten we eens kijken hoe deze korte CSS de HTML in twee verschillende gevallen opmaakt. In Case 1, het tweede element binnen een Maar als het ouderelement doet heb een tweede alinea, de In ons voorbeeld, de Lid 1, Kind 1 Lid 2, Kind 3 In het tweede geval verplaatsen we de ongeordende lijst naar de derde plaats en de tweede alinea komt eraan. Dit betekent dat zowel de Lid 1, Kind 1 Lid 2, Kind 2 Als u meer wilt lezen over de verschillen tussen de Als we het hebben over pseudo-klassen, is het ook belangrijk om te begrijpen hoe ze verschillen van pseudo-elementen, om ze niet te verwarren. Maar terwijl we pseudo-klassen gebruiken om HTML-elementen te selecteren die bestaan in de documentenboom alleen niet gemarkeerd, pseudo-elementen stellen ons in staat om elementen te richten die bestaan normaal niet in de DOM, überhaupt (bijv Er is ook een verschil in syntaxis. Pseudo-elementen worden over het algemeen geïdentificeerd met dubbele dubbele punten Dit kan tot verwarring leiden, omdat in CSS2 pseudo-elementen ook met een enkele dubbele punt werden gemarkeerd - browsers accepteren nog steeds de syntaxis van de enkele punt voor pseudo-elementen. Er zijn ook verschillen tussen pseudo-klassen en pseudo-elementen in de manier waarop we ze kunnen targeten met CSS. Pseudo-elementen kunnen alleen verschijnen na de volgorde van selectors, terwijl pseudo-klassen overal in de CSS-selectorreeks kunnen worden geplaatst. U kunt bijvoorbeeld het laatste lijstitem van een lijstelement als richten OF De eerste reeks van de selector selecteert het laatste kind in de Laten we iets soortgelijks proberen met pseudo-elementen. De CSS-code hierboven is geldig en de tekst "rood" zal verschijnen na de Deze code aan de andere kant zal niet werken, zoals wij kan de positie van een pseudo-element niet veranderen in de selectorreeks. Ook kan slechts één pseudo-element naast een selector verschijnen, terwijl pseudo-klassen kunnen met elkaar worden gecombineerd als de combinatie zinvol is. Om bijvoorbeeld eerste onderliggende elementen te targeten die ook alleen-lezen zijn, kunnen we een combinatie van de pseudoklassen maken Een selectorcode met een Het is belangrijk om dat te weten dit zijn niet CSS pseudo-klassen die worden getarget door jQuery. Ze worden jQuery-selector-extensies genoemd. jQuery-selectorextensies kunnen je gebruiken target HTML-elementen met eenvoudigere trefwoorden. De meeste zijn combinaties van meerdere normale CSS-kiezers, die worden weergegeven met een enkel zoekwoord.Doel van pseudo-klassen
.laatste om de laatste elementen in verschillende bovenliggende containers te identificeren.
li.last text-transform: hoofdletters; option.last font-style: italic;
.laatste klasse van het vorige laatste element tot het huidige element.:laatste kind pseudo-class is inderdaad heel nuttig. Op deze manier, wij hoef niet het laatste element aan te geven in de HTML-code, maar we kunnen ze nog steeds opmaken met de volgende CSS: li: last-child text-transform: hoofdletter; optie: last-child font-style: italic;
Belangrijkste soorten pseudo-klassen
1. Dynamische pseudo-klassen
: hover, :focus, :link, en : visited, die allemaal kunnen worden toegevoegd aan de ankertag. a: bezocht color: # 8D20AE; .knop: zweven, .knop: focus font-weight: bold;
2. Pseudo-klassen op basis van de staat
: aangevinkt dat kan worden toegepast voor selectievakjes ():volledig scherm om elk element dat momenteel wordt weergegeven in de modus Volledig scherm te targeten: disabled voor HTML-elementen die zich in de uitgeschakelde modus bevinden, zoals , , en . : aangevinkt, die markeert of een selectievakje is aangevinkt of niet. .checkbox: checked + label font-style: italic; invoer: uitgeschakeld achtergrondkleur: #EEEEEE;
3. Structurele pseudo-klassen
:eerstgeborene, :laatste kind, en : N-kind (n) - alles kan worden gebruikt om een specifiek onderliggende element binnen een container te targeten op basis van zijn positie - en :wortel die het hoofdniveau-element op het hoogste niveau in de DOM target. 4. Diverse pseudo-klassen
: Geen (x) die elementen selecteert die niet overeenkomen met de selector x: Lang (taal-code) die elementen selecteert waarvan inhoud in een specifieke taal is: Dir (gerichtheid) die elementen selecteert met de inhoud van een bepaalde richting (van links naar rechts of van rechts naar links). p: lang (ko) achtergrondkleur: # FFFF00; : root background-color: # FAEBD7;
n-kind vs n van het type Pseudo-Classes
: N-kind en : N-of-type pseudo-classes.: N-of-kind (n) target een element dat de tweede kind van het bovenliggende element, en : N-of-type (n) doelen de tweede onder de zelfde type van element (zoals paragrafen) in een bovenliggend element. / * een alinea die ook het tweede onderliggende element is in het bovenliggende element * / p: nth-child (2) color: # 1E90FF; // lightblue / * de tweede alinea in een bovenliggend element * / p: nth-of-type (2) font-weight: bold;
Zaak 1
n-kind (2) regel is niet van toepassing. Hoewel het een tweede kind is, is het dat wel niet een paragraaf. n-of type (2) regel is van toepassing, omdat deze regel alleen naar de elementen, en geeft niet om andere types van elementen (zoals ongeordende lijsten) in het bovenliggende element.n-of type (2) regel zal de tweede alinea opmaken die Kind 3 is.
Ongeordende lijst 1, kind 2
Case 2
: N-kind (2) en de : N-of type (2) regels worden toegepast, omdat de tweede alinea ook het tweede kind van de ouder is
Ongeordende lijst 1, kind 3
: N-of-kind en : N-of-type pseudo-klassen, CSS Tricks heeft een geweldige post erop. Als u SASS gebruikt, kan Family.scss u helpen om gecompliceerd te maken n-kind'gejaagd elementen.Pseudo-klassen versus pseudo-elementen
Pseudo-elementen, zoals ::voor en ::na (zie deze tutorial over hoe ze te gebruiken) zijn ook toegevoegd door gebruikersagenten, en ze kunnen worden getarget en gestyled met CSS ook, net als pseudo-klassen. ::voor en ::na) of alleen als bepaalde delen van bestaande elementen (bijv ::eerste brief of :: placeholder). ::, terwijl pseudo-klassen worden geïdentificeerd met een enkele dubbele punt :.1. Hun plaats in de CSS-selectorreeks
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.rood) en de tweede selecteert het laatste kind uit elementen die de .rood klas binnen ul> .red :: after display: block; inhoud: 'rood'; kleur: # B0171F;
items met de klas .rood. ul> :: after.red display: block; inhoud: 'rood'; kleur: # B0171F;
2. Aantal voorvallen in een selectorreeks
:eerstgeborene en :alleen lezen op de volgende manier: : first-child: read-only color: #EEEEEE;
jQuery Selector Extensions
: syntaxis vormt niet altijd een goede CSS pseudo-klasse. Als je ooit jQuery hebt gebruikt, dan heb je mogelijk veel van zijn selectors gebruikt : syntaxis, bijvoorbeeld $ ( ': Checkbox'), $ ( ': Input') en $ ( ': Geselecteerd). / * Verander het lettertype van alle invoer-gerelateerde HTML-elementen, zoals knop, selecteer en voer * / $ (": input") .css in ("font-family", "courier new")
