Selector bepaalt op welk element een bepaalde CSS-regel moet worden toegepast.

Basiskiezers

Elementkiezers Deze basiskiezer selecteert het element waarop de regel wordt toegepast.
Syntaxis:element
Voorbeeld: De invoerselector selecteert alle elementen die worden gebruikt om interactieve besturingselementen in webformulieren te maken."> .
Syntaxis: .Klassekiezers Deze basiskiezer selecteert elementen op basis van de waarde van hun klassenattribuut.
Voorbeeld: Klassenaam
Syntaxis: de .index-selector selecteert alle elementen met de overeenkomstige klasse (die is gedefinieerd in het class="index"-attribuut of iets dergelijks).
Voorbeeld: ID-kiezers Deze basiskiezer selecteert elementen op basis van de waarde van hun id-attribuut. Vergeet niet dat de ID uniek moet zijn, dat wil zeggen dat deze slechts voor één element in het HTML-document mag worden gebruikt. #IDnaam De #toc-selector selecteert het element met id toc (dat is gedefinieerd in het id="toc"-attribuut of iets dergelijks).
Universele Selector Deze basisselector selecteert alle elementen. Het bestaat ook in lokale en mondiale ruimtes
namen Syntaxis:
Syntaxis:
Voorbeeld:*ns|* *|*

Voorbeeld:

De *-selector selecteert alle elementen. Attribuutkiezers Deze basisselector selecteert elementen op basis van een van hun attributen en/of de waarde ervan. De selector selecteert alle elementen met het autoplay-attribuut (ongeacht de waarde ervan).
Syntaxis: Combinatoren
Voorbeeld: De "+" combinator selecteert het element dat er onmiddellijk op volgt

gespecificeerd element
Syntaxis:, als ze een gemeenschappelijke ouder hebben.
Voorbeeld: A+B de ul + li-selector selecteert elk element dat zich onmiddellijk na het element bevindt

.
Syntaxis: Gerelateerde selectors De combinator "~" selecteert elementen die na het opgegeven element staan ​​als ze een gemeenschappelijk bovenliggend element hebben.
Voorbeeld: A~B

p ~ span selecteert alle elementen
Syntaxis:, die zich achter het element bevinden, definieert een alinea met tekst.">
Voorbeeld: binnen één ouder. Onderliggende selectors De ">" combinator selecteert elementen die directe onderliggende elementen zijn van het opgegeven element. A>B , die zich in het element bevinden) is de basiscontainer voor stroominhoudselementen. Het heeft geen invloed op de inhoud of het formaat totdat het is opgemaakt met behulp van CSS. Het zijn "> vertegenwoordigt inherent niets. Ondertussen wordt het gebruikt om inhoud te groeperen, waardoor het gemakkelijk kan worden opgemaakt met ">
.
Pseudo-elementen
Pseudo-elementen zijn abstract, in tegenstelling tot HTML-elementen die presentatie bieden. In HTML is er bijvoorbeeld geen individuele elementen om de eerste letter of eerste regel tekst aan te geven, of een opsommingsteken voor een ongeordende lijst. Pseudo-elementen vertegenwoordigen dergelijke objecten en bieden de mogelijkheid om ze op te maken met behulp van CSS.
Pseudo-klassen
Met pseudo-klassen kunt u elementen selecteren op basis van informatie die niet in de elementenboom staat, zoals staats- of andere gegevens die op een andere manier moeilijk te isoleren zijn. Ze kunnen bijvoorbeeld een link selecteren die wel of niet eerder is bezocht.
Specificaties
Specificatie	Status
Een reeks ontwerpregels (die op hun beurt bestaan ​​uit selectors met een advertentieblok) toegepast op bepaalde html-tags, waardoor het uiterlijk van de site wordt gevormd.
CSS-kiezer- Dit bestanddeel CSS-regels verantwoordelijk voor het bepalen van specifieke html-tags, waarop de ontwerpstijlen die in deze regel zijn gespecificeerd, worden toegepast.
Het is dus dankzij selectors dat de browser begrijpt welke elementen van de paginacode specifieke ontwerpstijlen moeten toepassen.
De tool voor het selecteren van CSS-elementen is uiterst flexibel en handig voor het selecteren van zowel individuele code-elementen als hele groepen elementen die door bepaalde kenmerken zijn gedefinieerd.
Soorten CSS-kiezers
Net als zinnen in tekst kunnen CSS-selectors eenvoudig of complex zijn. Het verschil tussen beide is dat complexe worden verkregen door verschillende eenvoudige te combineren en voor meer worden gebruikt fijnafstemming definitief ontwerp van de hulpbron.
Alleen anders reguliere teksten bij trapsgewijze stijlbladen maakt het uit in welke volgorde en welke selectors we gebruiken. Bovendien zal dit niet alleen bepalen welke elementen we kiezen en op basis van welke criteria, maar ook de verwerkingssnelheid van onze code als geheel, maar we zullen in verdere artikelen over de subtiliteiten praten.
Eenvoudige selecteurs
• Universele selector – is verantwoordelijk voor het selecteren van alle elementen in het document. Aangegeven door een asterisk. Het wordt meestal gebruikt om de standaardstijlen van browsers opnieuw in te stellen, zodat iedereen die de site bezoekt zijn ontwerp niet verliest als hij er een gebruikt eigen instellingen browser of verschillende plug-ins...

  * (een beetje stijl;)

• Typekiezer - selecteert alle overeenkomende tags een bepaald type. Opgegeven door de tagnaam. Gebruikt voor taak algemene regels documentontwerp, bijvoorbeeld set verschillende lettertypen rubrieken en platte tekst document.

  h1 (een bepaalde stijl; )

• – zal de css-regel toepassen op alle tags met specifieke naam klas. Gespecificeerd door een punt met de klassenaam er direct achter geschreven. Misschien wel de meest voorkomende selector in lay-out. Het wordt meestal gebruikt om verschillende ontwerpstijlen in te stellen voor tags van hetzelfde type, maar verschillend qua functionaliteit.

  LeftColumn (een bepaalde stijl;)

• ID-selector – gebruikt om unieke elementen op de pagina te ontwerpen. Het wordt gespecificeerd door een hash gevolgd door de naam-ID. Wordt gebruikt als u er een moet uitgeven specifiek onderdeel pagina's.

  #alertButton (een bepaalde stijl;)

• – selecteert tags die een attribuut hebben. Gespecificeerd door de attribuutnaam tussen vierkante haakjes. Kan worden gebruikt om een ​​groep tags te ontwerpen waarin eenvoudigweg een dit attribuut en voor een groep tags die een bepaald attribuut met een specifieke waarde bevatten.

  [type] (een bepaalde stijl; ) [type= "submit" ] (een bepaalde stijl; ) input[type= "submit" ] (een bepaalde stijl; )
Complexe selectors
• Selector voor afstammelingen – selecteert afstammelingselementen (tags die zich in een andere tag bevinden). Opgegeven gescheiden door een spatie (bovenliggend - spatie - kind).

  div p (een bepaalde stijl; )

• Selector voor onderliggende elementen - selecteert een element dat direct in een ander element is genest. Gespecificeerd door het symbool ">" (ouder-controle-kind). Een kindelement verschilt van een afstammend element doordat het onmiddellijk na het ouderelement komt (het eerste niveau van nesten). Terwijl een kind wordt beschouwd als elke tag in een ander kind, ongeacht het nestniveau.

  Zijbalk>ul (een bepaalde stijl;)

• Kiezer voor zusterelementen – selecteert een tag die onmiddellijk na een andere tag komt (niet binnenin ingesloten, maar verder gaand). Aangegeven door een plus (eerste element – ​​plus – zusterelement). In de praktijk wordt er zelden gebruik van gemaakt. Vereiste toestand toepassing is de aanwezigheid van een gemeenschappelijke ouder voor alle elementen gecombineerd met een “+” teken.

  h1+ p (een bepaalde stijl; )
Pseudo-klassen en pseudo-elementen
De bovenstaande classificatie van CSS-selectors was uitsluitend afhankelijk van de documentopmaak. Als we een verandering willen doorvoeren verschijning elementen afhankelijk van veranderingen in de status op de pagina (bijvoorbeeld het veranderen van de kleur van een knop tijdens het zweven), dan kunnen we pseudo-klassen en pseudo-elementselectors gebruiken.
• Onthoud dat, in tegenstelling tot html in CSS-geval letters zijn belangrijk. Dat wil zeggen, class.active en .Active zijn niet hetzelfde! Ze zullen van toepassing zijn op verschillende elementen, indien aanwezig in het document.
• Geef de selectors voor styling een naam, zodat u er later niet mee in de war raakt: .leftColumn – goede naam, .left - hangt af van de situatie, maar niet echt, .llll - een soort rotzooi, dat kun je zelf zien zonder naar de code te kijken, waar komt deze klasse vandaan?
• Laat me je er nogmaals aan herinneren: als er maar één element op de pagina staat en het is allemaal uniek, dan gebruiken we id ervoor, maar als de mogelijkheid bestaat dat er nog een element verschijnt, of als er eenvoudigweg meerdere vergelijkbare elementen op de pagina staan, pagina en gebruik vervolgens klassen voor ontwerp.
Samenvattend
Selectoren in CSS- Dit krachtigste instrument identificatie van bepaalde pagina-elementen of een groep elementen verenigd door een specifiek kenmerk voor verdere toepassing van ontwerpstijlen daarop vanuit het advertentieblok gerelateerd aan deze selector.
Na het beheersen algemene principes interactie en het maken van selectors, u vergeet de problemen met het ontwerp van webdocumenten. Goede kennis selectors kunnen de tijd voor het opmaken van HTML-pagina's aanzienlijk verkorten.
Hoewel het onderwerp op het eerste gezicht uiterst verwarrend lijkt, wordt het na een periode van oefenen eenvoudig en begrijpelijk, ondersteund door kwalitatieve theorie.
CSS-selectors zijn een van de belangrijkste functies CSS-taal. Met selectors hebt u toegang tot een groep elementen of slechts één daarvan.
Selectoren in CSS
Selectors zijn nodig om de browser te vertellen welke elementen de stijlen moeten toepassen die worden beschreven in krullende beugels.
P(Stijlen…)
IN in dit geval De selector is p – alineatag. Deze regel voegt stijlen toe aan alle alinea's op een webpagina.
Wat zijn de soorten CSS-selectors?
Tagkiezer - de eenvoudigste. Het is aangetoond in een voorbeeld. Om het in CSS te schrijven, moet je de tagnaam zonder punthaken schrijven. De stijlen worden toegepast op alle elementen met die tag.
Table() – stijlen voor alle tabellen
Li() – stijlen voor alle lijstitems
A() – stijlen voor alle links
Stijl klasse– u kunt een stijlklasse aan elk element op een webpagina koppelen. Zelfs tot één letter. Vervolgens kunt u in het CSS-bestand toegang krijgen tot dit element door ervoor te schrijven eigen stijlen. Om dit te doen, moet je een punt plaatsen en de naam van de stijlklasse erna schrijven. Voorbeelden:
.about() – de regels zijn van toepassing op alle elementen die dat hebben klasse attribuut= "over"
.down() – de regels zijn van toepassing op alle elementen die het class = "down" attribuut hebben
.float() – de regels zijn van toepassing op alle elementen met de attribuutklasse = "float"
Zoals je kunt zien, is het belangrijkste om een ​​punt te maken. Een stijlklasse kan aan een onbeperkt aantal elementen worden gebonden. Aan een element kunnen meerdere klassen worden toegewezen.
Identificatie– een ander type selector. Eén identificatie kan aan slechts één element worden toegewezen. Het kan geen twee ID's hebben en de ID die aan dit element is gekoppeld, kan nergens anders worden geregistreerd.
Het is als volgt ingesteld:
Paragraaf
Dat wil zeggen dat, net als bij een klasse, alleen het attribuut wordt gebruikt Identiteitskaart elk woord wordt gebruikt als betekenis.
Om via css toegang te krijgen tot een element met een ID, moet je de id-waarde schrijven en er een hash voor zetten.
#first( Lettergrootte: 22px )
We gingen naar de paragraaf met Identiteit = eerste. De stijl wordt er alleen op toegepast. Voor de overige alinea's verandert de lettergrootte niet.
Pseudo-klassen
Er is één interessant type selector in CSS: pseudo-klassen. Dat wil zeggen, klassen die elementen standaard hebben en die niet extra gespecificeerd hoeven te worden. Sommige werken alleen voor links, terwijl andere op alle elementen kunnen worden toegepast. Hoe dan ook, CSS-pseudoklassen vergemakkelijken het werk van een webontwikkelaar aanzienlijk.
Een pseudoklasse is een stijlklasse van een element dat we niet zelf hebben gedefinieerd; het bestaat gewoon op zichzelf. Als je bijvoorbeeld deze code in html ziet:
Paragraaf
Je kunt absoluut zien dat deze paragraaf een speciale klasse heeft, omdat hij daar is geschreven. Maar pseudo-klassen hoeven niet geschreven te worden; elementen hebben deze standaard, en dit is in dit geval hun voordeel. Laten we vervolgens eens kijken naar de meest populaire van hen.
Voor koppelingen
Voor invoervelden en links
:focus – De stijl wordt toegepast op het element dat invoerfocus krijgt.
In feite zijn er veel nieuwe coole pseudo-klassen voor invoervelden, maar ze zijn allemaal nieuw CSS3, en in dit artikel wil ik alleen de eenvoudigste bespreken. Er zal in de toekomst zeker een artikel over CSS3-selectors verschijnen.
Voor alle elementen
1. :hover – stijl toegepast wanneer u over een element zweeft
2. :first-child – selecteer het eerste onderliggende element
3. :last-child – laatste kindelement
4. :nth-child() – Een getal of formule wordt tussen haakjes geschreven en bepaalt welke elementen worden geselecteerd.
5. :first-of-type, :last-of-type, :nth-of-type() – werken vrijwel identiek aan de vorige pseudo-klassen. Het enige verschil is dat hier rekening wordt gehouden met het elementtype. Het verschil is voelbaar in het volgende voorbeeld:
   li:first-child – het eerste lijstitem wordt geselecteerd, maar alleen als het li-element op de eerste plaats komt in het bovenliggende blok. Als er nog een tag voor staat, wordt er niets geselecteerd.
6. li:first-of-type – het eerste lijstitem van alles wat zich in het bovenliggende item bevindt, wordt geselecteerd. Het maakt niet uit waar ze zich in de code bevinden. Ik hoop dat het verschil duidelijk is.
7. :nth-last-child – werkt hetzelfde als :nth-child, maar telt vanaf het laatste element, niet vanaf het eerste.
8. :nth-last-of-type – vergelijkbaar met :nth-last-child, maar rekening houdend met het elementtype.
Dit zijn niet allemaal pseudo-klassen, maar de meest populaire en noodzakelijke. Eigenlijk worden alle pseudo-klassen op dezelfde manier gemarkeerd in css, gescheiden door een dubbele punt. Bovendien kunt u selectors combineren en krijgen interessante kansen:
a:visited:active – stijlen voor de reeds bezochte link waarop wordt geklikt.
div:first-child:hover – stijlen voor alle eerste blokken in hun ouders waar overheen wordt bewogen.
Zoals je kunt zien, geven dergelijke selectors geweldige kansen qua stijlelementen. Gebruik ze en je kunt gemakkelijk alle elementen bereiken.
Selectoren combineren
Nog één ding belangrijke regel, waarover u moet weten. Stijlklassekiezers kunnen worden geschreven zonder ze van elkaar te scheiden. Bijvoorbeeld:
.class1.class2 – selecteert de elementen die beide klassen hebben.
.class1.class3.class8 – selecteert elementen waaraan alle drie de stijlklassen zijn gekoppeld.
Geneste selectors
Als we selectors van elkaar scheiden met spaties, kunnen we het element bereiken dat we nodig hebben. Voorbeelden:
Tabel td – selecteert alle cellen in tabellen
Ul li a – selecteert alle links in lijstitems (en lijstitems liggen op hun beurt in de lijsten zelf)
.class1 p – selecteert alle paragrafen met het attribuut class = “class1”
.class2 p span – selecteert alle taginhoud , liggend in alinea's met klasse klasse2.
Je kunt op deze manier zo vaak nesten en combineren als je wilt. Voorbeelden:
#header .logo span:eerste letter()– selecteert de eerste letter in de reeks van het logo, die zich in de koptekst bevindt
.class1.class2:hover() – definieert de hover-stijl voor elementen die beide stijlklassen hebben.
Kindkiezers
Als u bovenliggende elementen wilt opmaken, is dat zo DIRECT dochterondernemingen, dan moet je het als volgt schrijven:
Ul > li() – selecteert lijstitems die er direct in zijn genest, en niet in andere tags
P > a() – selecteert alleen die links in paragrafen die er direct in liggen, en niet genest in andere tags (die op hun beurt al genest zijn in paragrafen)
Voorbeeld:
Als u een selector zoals deze schrijft P > a , worden de stijlen dan toegepast op de link in het bovenstaande voorbeeld? Nee, omdat het nog steeds in een andere tag is genest, dat wil zeggen dat het geen direct kind is.
Aangrenzende selectors
Het laatste waar we vandaag naar zullen kijken. Als je het als volgt in CSS schrijft:
.class1 + .class4() , dan selecteert deze selector het element met het attribuut class = "class4" , en dit element moet in de HTML-code verschijnen onmiddellijk na het element met de klasse class1. Alleen in dit geval zal alles werken. Laten we nog eens naar een voorbeeld kijken:
Zal de bovenstaande selector (.class1 + .class4()) werken? Nee, want de elementen staan ​​niet naast elkaar. Daartussen bevindt zich de img-tag. Als je het verwijdert, werkt alles.
We hebben dus gekeken naar de meest elementaire en eenvoudigste selectors. Deze kennis zal zeker genoeg zijn om 95% van de problemen op te lossen. In het volgende artikel zal ik enkele meer specifieke CSS-selectors beschrijven.
Kenmerkkiezers
Hiermee kunt u specifieke elementen selecteren zonder er een stijlklasse of identificatie aan toe te wijzen.
Attribuutselectors zijn selectors waarin een attribuut of een attribuut met een waarde tussen vierkante haakjes staat. Een paar voorbeelden om het duidelijk te maken:
* – selecteert alle elementen die een href-attribuut met een willekeurige waarde hebben.
invoer – selecteert alle invoerelementen die een uitgeschakeld attribuut hebben (alle uitgeschakelde velden).
invoer – selecteert alle velden waarvan het type wachtwoord is, dat wil zeggen velden voor het invoeren van een wachtwoord.
img – selecteert een afbeelding met het attribuut src = "/logo.png" ingesteld.
Zoals u kunt zien, is het schrijven van CSS-attribuutselectors niet zo moeilijk. Hun belangrijkste verschil zijn vierkante haken, waarin een eenvoudig attribuut of een attribuut met zijn exacte waarde. Maar de functionaliteit van deze selectors houdt daar niet op.
Geavanceerde CSS-attribuutselectors
Alle volgende selectors zijn hoofdlettergevoelig.
Zoek aan het begin van een regel
div – selecteert alle div's die een stijlklasse hebben die begint met "block" . Zo worden bijvoorbeeld de volgende blokken geselecteerd: "block-head", "block-3", "blocknote" . Het belangrijkste is dat er een trefwoord aan het begin van de betekenis staat.
Vinden aan het einde van een regel
A – selecteert alle links waarvan het adres eindigt op .rar . Als u dus iets op uw website kunt downloaden, kunt u een pictogram toevoegen naast alle links naar gearchiveerde bestanden.
Overal in een waarde een subtekenreeks zoeken
span – selecteert alle span-tags die “kunst” in hun klassenaam hebben, waar dan ook in de naam. Zo worden bijvoorbeeld spanten met de volgende klassen geselecteerd: party, clart, art-1.
Zoek naar voorvoegsels
p – selecteert alinea's met een stijlklasse die een naam hebben die ofwel exact overeenkomt met "eerste" of die het voorvoegsel eerste bevat waarmee de klassenaam begint.
Woorden vinden in betekenis
invoer– selecteert alle invoerelementen waarin de waarde van het identifier-attribuut het woord tekst bevat. Het verschil met het overal zoeken naar een subtekenreeks is dat het het woord is dat moet worden opgenomen, en niet de subtekenreeks.
De laatste twee opties worden zelden gebruikt en zullen waarschijnlijk niet vaak nuttig voor u zijn, maar voor algemene ontwikkeling je kunt er nog steeds van weten.
Waar zijn attribuutkiezers nuttig voor?
Met dergelijke selectors kunt u veel HTML-elementen selecteren zonder ze stijlklassen te geven. In sommige gevallen kunt u met deze methode de code inkorten en uw werk vereenvoudigen. Hierboven gaf ik bijvoorbeeld een voorbeeld met een pictogram voor archieven. Hier verscheen een ander idee. Op uw website linkt u bijvoorbeeld vaak naar een andere bron (bijvoorbeeld Wikipedia) en wilt u een speciaal pictogram weergeven naast links naar Wikipedia, die andere links niet zouden moeten hebben.
Je kunt het als volgt implementeren:
A (css-regels)
In feite zijn er nog veel meer manieren om attribuutkiezers te gebruiken. Ze kunnen tot op zekere hoogte het werk vereenvoudigen waar dat nodig is. Gebruik css en abonneer u op de blog voor meer informatie over webontwikkeling.
CSS3-selectors en pseudo-klassen
Over nieuwe css3-selectors, waarover ik in eerdere artikelen niet heb geschreven.
Verbeterd werken met formulieren
Dit zijn nieuwe pseudo-klassen. In principe gaat het allemaal om nieuwe vormenmogelijkheden.
:enabled – pseudo-klasse selecteert alles actieve velden. Dat wil zeggen, die waarin je iets kunt schrijven of op zijn minst leesbaar zijn.
:disabled is de tegenovergestelde pseudo-klasse, selecteert alle uitgeschakelde velden. Dienovereenkomstig kunt u met zijn hulp extra stijlen aan dergelijke velden toevoegen.
:alleen-lezen – alles selecteren invoer, die alleen-lezen zijn.
:lezen-schrijven – selecteert alle velden die bewerkbaar zijn.
Stijlen toevoegen met geldigheid in gedachten
Er zijn ook zeer interessante pseudo-klassen waarmee je stijlen kunt toewijzen, afhankelijk van de geldigheid of ongeldigheid van de ingevoerde waarde. Voorheen kon dit alleen met met behulp van JavaScript.
:valid – selecteert alle velden waarin de ingevoerde waarde aan de vereisten voldoet. De vereisten zelf worden meestal gespecificeerd met behulp van het patroonattribuut. Kan ook afhankelijk zijn van het veldtype. Bijvoorbeeld het veld waarin het adres is geschreven e-mail, wordt als ongeldig beschouwd als er geen @ in de ingevoerde waarde staat.
:invalid – selecteert dienovereenkomstig alle ongeldige velden waarin de waarde niet overeenkomt met wat wordt verwacht. U kunt de tekstkleur in velden als deze bijvoorbeeld op rood instellen:
Invoer: ongeldig( Kleur: rood; )
Als we nu schrijven onjuiste waarden in de velden wordt de tekst rood. Zo kunt u ook afbeeldingen van een vinkje en een kruisje gebruiken om de gebruiker te laten zien of hij alles correct heeft ingevuld.
Stijlen voor verplichte velden
Ik zou ook willen opmerken dat de overeenkomstige pseudo-klasse is verschenen voor verplichte velden.
:required – selecteert elementen die dit attribuut hebben. Dat wil zeggen dat alle velden verplicht moeten worden ingevuld.
:optioneel – de tegenovergestelde klasse selecteert velden die optioneel zijn.
Pseudo-klasse: niet
:not is een soort anti-selector waarmee je kunt bepalen welke elementen NIET GEBRUIKEN stijlen. Een paar voorbeelden.
A:not(:last-child)() – selecteert alle links op de pagina behalve de laatste.
.nav:not(li)() – selecteert alle elementen met klasse-nav, maar dit mogen geen lijstitems zijn (li).
#article p:not(.special:first-child) – selecteert alle paragrafen in het artikelblok behalve de eerste paragraaf met de speciale klasse.
Zoals je kunt zien, staat er tussen haakjes een voorwaarde voor de pseudo-klasse: wat er precies moet worden uitgesloten van de selectie. U kunt ook combinatiekiezers in de voorwaarde schrijven, zodat u alles kunt selecteren en uitsluiten wat u maar wilt.
Dit is de pseudoklasse die soms nodig is, niet alleen in theorie, maar ook in de praktijk. Oh ja, je kunt ook doorgaan met het samenstellen van de selector na :not(). Bijvoorbeeld:
Div:not(#header) .wrap – selecteert alle div's met de wrap-klasse, behalve de div met id = "header"
Dit waren selectors die in CSS3 werden geïntroduceerd.
Prioriteit van CSS-kiezers
Gebruik om te bepalen welke stijlen voorrang hebben eenvoudige regels:
ID is de selector met de hoogste prioriteit. Als een element een stijlklasse en een id heeft, en aan beide dezelfde eigenschappen met verschillende waarden zijn toegewezen, worden de stijlen die voor de id zijn geschreven, uitgevoerd.
De klasse heeft een hogere prioriteit dan de tagselector (p, table, ul). Een pseudoklasse heeft hetzelfde gewicht als een eenvoudige klasse. p:first-line heeft voorrang op .firstline omdat de tweede selector slechts een klasse is, terwijl de eerste een tag-selector + pseudo-klasse is.
Nog één ding nuttige regel— hoe specifieker de selector, hoe meer prioriteit de stijlen eraan hebben. Tussen body en p wint de paragraaf bijvoorbeeld de strijd omdat deze een specifiekere selector is dan body (omdat het de hele pagina betreft, dus niet erg specifiek). Tabel p is op zijn beurt specifieker dan alleen p . Houd over het algemeen rekening met deze regels.
Kortom
Dit artikel ging niet over attribuutkiezers, maar over het algemeen heb ik er al eerder over geschreven. Ik wens je veel succes bij het leren bouwen van websites, inclusief CSS-selectors.
Ik zou ook willen toevoegen dat als je jQuery gebruikt, het zijn eigen selectors heeft, hoewel ze erg op deze lijken, maar er zijn kleine verschillen.
CSS (Cascading Style Sheets), of trapsgewijze stijlbladen, worden gebruikt om het uiterlijk te beschrijven van een document dat is geschreven in een opmaaktaal. Meestal worden CSS-stijlen gebruikt om de stijl van webpagina-elementen te maken en te wijzigen gebruikersinterfaces erin geschreven HTML-talen en XHTML, maar kan ook worden toegepast op elk soort XML-document, inclusief XML, SVG en XUL.
Cascading stylesheets beschrijven regels voor het opmaken van elementen met behulp van eigenschappen en aanvaardbare waarden deze eigenschappen. Voor elk element kunt u een beperkte set eigenschappen gebruiken; andere eigenschappen hebben er geen invloed op.
Een stijldeclaratie bestaat uit twee delen: het webpagina-element − keuzeschakelaar en opmaakopdrachten - advertentieblok. De selector vertelt de browser welk element moet worden opgemaakt, en het declaratieblok (code tussen accolades) somt de opmaakopdrachten op: eigenschappen en hun waarden.

Rijst. 1. Declaratiestructuur in CSS-stijl
Soorten trapsgewijze stijlbladen en hun specifieke kenmerken
1. Soorten stijlbladen
1.1. Extern stijlblad
Extern stijlblad vertegenwoordigt tekstbestand met de .css-extensie, die een reeks CSS-stijlen voor elementen bevat. Het bestand wordt gemaakt in een code-editor, net als een HTML-pagina. Het bestand kan alleen stijlen bevatten, zonder HTML-opmaak. Een extern stylesheet wordt met behulp van een tag aan een webpagina gekoppeld , gelegen in de sectie . Deze stijlen werken voor alle pagina's van de site.
U kunt meerdere stijlbladen aan elke webpagina koppelen door meerdere tags achter elkaar toe te voegen , waarmee het doel van dit stijlblad wordt aangegeven in het mediatagattribuut. rel="stylesheet" specificeert het type link (link naar een stylesheet).
Het kenmerk type="text/css" is niet vereist door de HTML5-standaard en kan dus worden weggelaten. Als het kenmerk ontbreekt, is de standaardwaarde type="text/css" .
1.2. Interne stijlen
Interne stijlen ingebed in een sectie HTML-document en worden gedefinieerd in de tag. Interne stijlen hebben voorrang op externe stijlen, maar zijn inferieur aan inline stijlen (gespecificeerd via het stijlattribuut).
...


1.3. Ingebouwde stijlen
Als we schrijven inline-stijlen, schrijven we de CSS-code in het HTML-bestand, direct in de elementtag, met behulp van het style-attribuut:
Let op deze tekst.
Dergelijke stijlen hebben alleen invloed op het element waarvoor ze zijn ingesteld.
1.4. @importregel
@importregel Hiermee kunt u externe stijlbladen laden. Om de @import-richtlijn te laten werken, moet deze vóór alle andere regels in het stijlblad (extern of intern) verschijnen:
De @import-regel wordt ook gebruikt om weblettertypen op te nemen:
@import-URL(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillisch);
2. Soorten selectors
Selectoren vertegenwoordigen de structuur van een webpagina. Ze helpen bij het maken van regels voor het opmaken van webpagina-elementen. Selectors kunnen elementen zijn, hun klassen en identificatiegegevens, maar ook pseudo-klassen en pseudo-elementen.
2.1. Universele keuzeschakelaar
Komt overeen met elk HTML-element. Met * (marge: 0;) worden bijvoorbeeld de marges voor alle site-elementen opnieuw ingesteld. De selector kan ook worden gebruikt in combinatie met een pseudo-klasse of pseudo-element: *:after (CSS-stijlen) , *:checked (CSS-stijlen) .
2.2. Elementkiezer
Met elementkiezers kunt u alle elementen opmaken van dit type op alle pagina's van de site. H1 (font-family: Lobster, cursive;) zal bijvoorbeeld de algemene opmaakstijl voor alle h1-koppen instellen.
2.3. Klassenkiezer
Met klassenkiezers kunt u een of meer elementen opmaken waarin dezelfde klassenaam is geplaatst verschillende plaatsen pagina's of verder verschillende pagina's plaats. Als u bijvoorbeeld een titel met de kopklasse wilt maken, moet u het class-attribuut met de waardekop aan de openingstag toevoegen
en stel de stijl in voor de opgegeven klasse. Stijlen die met een klasse zijn gemaakt, kunnen worden toegepast op andere elementen, die niet noodzakelijkerwijs van dat type zijn.
Instructies voor gebruik persoonlijke computer
.headline (teksttransformatie: hoofdletters; kleur: lichtblauw; )
2.4. ID-kiezer
Met de ID-selector kunt u formatteren een specifiek onderdeel. De id moet uniek zijn en mag slechts één keer op één pagina voorkomen.
#zijbalk ( breedte: 300px; zwevend: links; )
2.5. Afstammeling-kiezer
Descendant-selectors passen stijlen toe op elementen binnen een containerelement. Bijvoorbeeld: ul li (text-transform: hoofdletters;) - selecteert alle li-elementen die onderliggende elementen zijn van alle ul-elementen.
Als je de nakomelingen van een bepaald element wilt opmaken, moet je dat element een stijlklasse geven:
p.first a (kleur: groen;) - deze stijl wordt toegepast op alle links die afstammen van de paragraaf met de eerste klasse;
p .first a (kleur: groen;) - als u een spatie toevoegt, worden links in een .first class-tag die een onderliggend element van het element is, opgemaakt
Eerst a (kleur: groen;) - deze stijl wordt toegepast op elke link die zich in een ander element bevindt, aangewezen door de class.first .
2.6. Kindkiezer
Een kindelement is een direct kind van het bevattende element. Eén element kan meerdere hebben kind elementen en elk element kan slechts één ouder hebben. Met de onderliggende selector kunt u alleen stijlen toepassen als het onderliggende element onmiddellijk na het bovenliggende element komt en er geen andere elementen tussen zitten, dat wil zeggen dat het onderliggende element niet in iets anders is genest.
Met p > strong worden bijvoorbeeld alle sterke elementen geselecteerd die kinderen zijn van het p-element.
2.7. Zuster selector
Zusterschap ontstaat tussen elementen die een gemeenschappelijke ouder delen. Met Sibling-kiezers kunt u elementen selecteren uit een groep elementen van hetzelfde niveau.
h1 + p - selecteert alle eerste alinea's onmiddellijk na een tag
zonder de overige paragrafen te beïnvloeden;
h1 ~ p - selecteert alle paragrafen die zuster zijn van een h1-kop en direct erna.
2.8. Kenmerkkiezer
Attribuutkiezers selecteren elementen op basis van de attribuutnaam of attribuutwaarde:
[attribuut] - alle elementen die het opgegeven attribuut bevatten - alle elementen waarvoor het alt-attribuut is gespecificeerd;
selector[attribuut] - elementen van dit type die het opgegeven attribuut bevatten, img - alleen afbeeldingen waarvoor het alt-attribuut is gespecificeerd;
selector[attribute="value"] - elementen van dit type die het opgegeven attribuut met een specifieke waarde bevatten, img - alle afbeeldingen waarvan de titel het woord bloem bevat;
selector[attribute~="value"] - elementen die gedeeltelijk bevatten gegeven waarde Als er bijvoorbeeld meerdere klassen zijn opgegeven voor een element, gescheiden door een spatie, p - paragrafen waarvan de klassenaam feature bevat;
selector[attribute|="value"] - elementen waarvan de lijst met attribuutwaarden begint met het opgegeven woord, p - paragrafen waarvan de klassenaam feature is of begint met feature ;
selector[attribute^="value"] - elementen waarvan de attribuutwaarde begint met de opgegeven waarde, a - alle links die beginnen met http:// ;
selector[attribute$="value"] - elementen waarvan de attribuutwaarde eindigt gespecificeerde waarde, img - alle afbeeldingen in png-formaat;
selector[attribute*="value"] - elementen waarvan de attribuutwaarde het opgegeven woord ergens bevat, a - alle links waarvan de naam book bevat.
2.9. Pseudo-klasse selector
Pseudoklassen zijn klassen die niet daadwerkelijk aan HTML-tags zijn gekoppeld. Hiermee kunt u CSS-regels toepassen op elementen wanneer een gebeurtenis plaatsvindt of aan een specifieke regel voldoet. Pseudo-klassen karakteriseren elementen met de volgende eigenschappen:
:hover - elk element waarover de muiscursor beweegt;
:focus - een interactief element waarnaar werd genavigeerd met behulp van het toetsenbord of werd geactiveerd met de muis;
:actief - element dat door de gebruiker is geactiveerd;
:valid - formuliervelden waarvan de inhoud in de browser is gecontroleerd op naleving van het opgegeven gegevenstype;
:invalid — formuliervelden waarvan de inhoud niet overeenkomt met het opgegeven gegevenstype;
:enabled - alle actieve formuliervelden;
:disabled — geblokkeerde formuliervelden, d.w.z. in een inactieve staat;
:in-range - formuliervelden waarvan de waarden binnen het opgegeven bereik liggen;
:out-of-range - formuliervelden waarvan de waarden niet binnen het opgegeven bereik liggen;
:lang() - elementen met tekst in de opgegeven taal;
:not(selector) - elementen die de opgegeven selector niet bevatten - klasse, identificatie, naam of formulierveldtype - :not() ;
:target is een element met het #-symbool waarnaar in het document wordt verwezen;
:checked — geselecteerde (door de gebruiker geselecteerde) formulierelementen.
2.10. Structurele pseudo-klasse selector
Structurele pseudo-klassen selecteren onderliggende elementen volgens de parameter die tussen haakjes is gespecificeerd:
:nth-child(oneven) - oneven onderliggende elementen;
:nth-child(even) - zelfs onderliggende elementen;
:nth-child(3n) - elk derde element onder kinderen;
:nth-child(3n+2) - selecteert elk derde element, te beginnen met het tweede kind (+2) ;
:nth-child(n+2) - selecteert alle elementen vanaf het tweede;
:nth-child(3) - selecteert het derde onderliggende element;
:nth-last-child() - selecteert in de lijst met onderliggende elementen het element waarmee opgegeven locatie, vergelijkbaar met:nth-child() , maar beginnend bij de laatste, in de tegenovergestelde richting;
:first-child - hiermee kunt u alleen het allereerste onderliggende element van de tag stylen;
:last-child - hiermee kunt u het laatste onderliggende element van de tag opmaken;
:only-child - selecteert een element dat het enige onderliggende element is;
:empty - selecteert elementen die geen kinderen hebben;
:root - selecteert het element dat de root in het document is - html-element.
2.11. Structureel type pseudo-klasse selector
wijzen naar specifiek type kindtag:
:nth-of-type() - selecteert elementen die lijken op :nth-child() , maar houdt alleen rekening met het type element;
:first-of-type - selecteert het eerste kind van een bepaald type;
:last-of-type - selecteert het laatste element van dit type;
:nth-last-of-type() - selecteert een element van het gegeven type in een lijst met elementen volgens de opgegeven locatie, beginnend vanaf het einde;
:only-of-type - selecteert het enige element van het opgegeven type uit de onderliggende elementen ouderelement.
2.12. Selector voor pseudo-elementen
Pseudo-elementen worden gebruikt om inhoud toe te voegen, die wordt gegenereerd met behulp van de content-eigenschap:
:first-letter - selecteert de eerste letter van elke paragraaf, is alleen van toepassing op blokelementen;
:first-line - selecteert de eerste regel met elementtekst, alleen van toepassing op blokelementen;
:before - voegt gegenereerde inhoud in vóór het element;
:after - voegt gegenereerde inhoud toe na het element.
3. Keuzecombinatie
Om elementen voor opmaak nauwkeuriger te selecteren, kunt u combinaties van selectors gebruiken:
img:nth-of-type(even) - selecteert alle even genummerde afbeeldingen waarvan de alternatieve tekst bevat woord css.
4. Selectoren groeperen
Dezelfde stijl kan tegelijkertijd op meerdere elementen worden toegepast. Om dit te doen, moet u de vereiste selectors aan de linkerkant van de aangifte vermelden, gescheiden door komma's:
H1, h2, p, span ( kleur: tomaat; achtergrond: wit; )
5. Overerving en cascade
Overerving en cascade zijn twee fundamentele concepten in CSS die nauw verwant zijn. Bij overerving nemen elementen eigenschappen over van hun ouder (het element dat ze bevat). De cascade manifesteert zich in hoe verschillende soorten stijlbladen worden toegepast op een document, en hoe conflicterende regels elkaar overschrijven.
5.1. Erfenis
Erfenis is het mechanisme waarmee bepaalde eigenschappen van een voorouder op zijn nakomelingen worden overgedragen. De CSS-specificatie maakt overerving mogelijk van eigenschappen die verband houden met de tekstinhoud van de pagina, zoals kleur, lettertype, letterafstand, regelhoogte, lijststijl, tekstuitlijning, tekstinspringing, teksttransformatie, zichtbaarheid, wit -spatie en woord-spatie. In veel gevallen is dit handig omdat u niet voor elk element op de webpagina de lettergrootte en letterfamilie hoeft in te stellen.
Eigenschappen die verband houden met blokopmaak worden niet overgenomen. Dit zijn achtergrond, rand, weergave, zwevend en helder, hoogte en breedte, marge, min-max-hoogte en -breedte, omtrek, overloop, opvulling, positie, tekstdecoratie, verticaal uitlijnen en z-index.
Gedwongen erfenis
Door te gebruiken trefwoord inherit kan een element dwingen een eigenschapswaarde van het bovenliggende element te erven. Dit werkt zelfs voor eigenschappen die niet standaard worden overgenomen.
Hoe CSS-stijlen worden ingesteld en werken
1) Stijlen kunnen worden overgenomen van het bovenliggende element (overgenomen eigenschappen of door de overervingswaarde te gebruiken);
2) Stijlen in het onderstaande stijlblad overschrijven de stijlen in de bovenstaande tabel;
3) Stijlen uit één element kunnen worden toegepast verschillende bronnen. U kunt controleren welke stijlen worden toegepast in de browserontwikkelaarsmodus. Om dit te doen, klikt u op het element klik met de rechtermuisknop muis en selecteer “Code bekijken” (of iets dergelijks). In de rechterkolom worden alle eigenschappen vermeld die op dit element zijn ingesteld of zijn overgenomen van een ouderelement, samen met de stijlbestanden waarin ze zijn opgegeven, en serienummer regels code.

Rijst. 2. Ontwikkelaarsmodus ingeschakeld Google-browser Chroom
4) Bij het definiëren van een stijl kunt u elke combinatie van selectors gebruiken: een elementselector, een element-pseudoklasse, een klasse of een element-ID.
div (rand: 1px effen #eee;) #wrap (breedte: 500px;).box (zwevend: links;).clear (helder: beide;)
5.2. Cascade
Cascaderend is een mechanisme dat het eindresultaat regelt in een situatie waarin verschillende CSS-regels op hetzelfde element worden toegepast. Er zijn drie criteria die de volgorde bepalen waarin eigenschappen worden toegepast: de belangrijke regel, de specificiteit en de volgorde waarin stijlbladen worden opgenomen.
Regel! belangrijk
Het gewicht van een regel kan worden opgegeven met het sleutelwoord!important, dat direct na de eigenschapswaarde wordt toegevoegd, bijvoorbeeld span (font-weight: bold!important;) . De regel moet aan het einde van de declaratie vóór het sluithaakje worden geplaatst, zonder spatie. Een dergelijke aankondiging heeft voorrang op alle andere regels. Met deze regel kunt u een eigenschapswaarde annuleren en een nieuwe instellen voor een element uit een groep elementen in het geval dat er geen directe toegang tot het stijlbestand is.
Specificiteit
Voor elke regel berekent de browser specificiteit van de selector, en als een element conflicterende eigenschapsdeclaraties heeft, wordt rekening gehouden met de regel die de meeste specificiteit heeft. De specificiteitswaarde bestaat uit vier delen: 0, 0, 0, 0. De selectorspecificiteit wordt als volgt gedefinieerd:
voor id wordt 0, 1, 0, 0 toegevoegd;
voor klasse 0 wordt 0, 1, 0 toegevoegd;
voor elk element en pseudo-element wordt 0, 0, 0, 1 toegevoegd;
voor een inline stijl die rechtstreeks aan een element wordt toegevoegd: 1, 0, 0, 0 ;
Een universele selector heeft geen specificiteit.
H1 (kleur: lichtblauw;) /*specificiteit 0, 0, 0, 1*/ em (kleur: zilver;) /*specificiteit 0, 0, 0, 1*/ h1 em (kleur: goud;) /*specificiteit: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (kleur: blauw;) /*specificiteit: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .zijbalk (kleur: grijs;) /*specificiteit 0, 0, 1, 0 */ #sidebar (kleur: oranje;) /*specificiteit 0, 1, 0, 0*/ li#sidebar (kleur: aqua;) /*specificiteit: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
Als gevolg hiervan zullen de regels die specifieker zijn, op het element worden toegepast. Als een element bijvoorbeeld twee specificiteiten heeft met de waarden 0, 0, 0, 2 en 0, 1, 0, 1, dan wint de tweede regel.
Volgorde van verbonden tabellen
Je kunt er meerdere maken externe tabellen stijlen en verbind ze met één webpagina. Als ze in verschillende tabellen voorkomen verschillende betekenissen eigenschappen van één element, dan wordt als gevolg daarvan de regel uit het onderstaande stijlblad op het element toegepast.
Selectie in CSS − dit is een aanwijzer op een element of groep elementen waarop stijlregels worden toegepast. Er zijn de volgende typen kiezers:
1. Selectoren op tags: h1
2. Selectie op ID: #voornaamst
3. Selectors per klasse: .verborgen
4. Keuzeschakelaar voor meerdere klassen
Ze worden samen geschreven zonder spaties. Selectors die tegelijkertijd aan meerdere voorwaarden voldoen (logische “AND”). De stijlen worden toegepast op alle elementen die tegelijkertijd zowel class.hidden als class.closed hebben.
Verborgen.gesloten
5. Contextkiezers
Gescheiden door een spatie. Deze selectors worden alleen gebruikt om stijlen op een element toe te passen als dit het geval is genest naar het gewenste onderdeel.
P sterk ul.geselecteerd.header.menu a
6. Aangrenzende selectors
Selecteert het volgende element. Ze zijn geschreven met het + teken. Leest als: pas eigenschappen toe op selector2, wat zou moeten zijn onmiddellijk daarna keuzeschakelaar1.
Stijlen worden alleen toegepast op een element dat overeenkomt met selector2 als het wordt voorafgegaan door een element dat overeenkomt met selector1.
....groen + .geselecteerd()
In het voorbeeld passen .green + .selected stijlen toe op het tweede element, omdat ervoor staat een element met klasse .green . De selector .green + li past ook stijlen toe op het tweede element, maar de selector .selected + .green werkt niet.
7. Gerelateerde selectors
Hoogtepunten daaropvolgende elementen. Vergelijkbaar met de vorige, maar met het verschil dat alle volgende elementen zijn geselecteerd, niet alleen het eerste element.
• item
Ook geselecteerd
Niet geselecteerd...ul~p()
IN in dit voorbeeld alle p-elementen volgend op ul worden geselecteerd. Terwijl bij gebruik van de ul + p-selector alleen het eerste element wordt geselecteerd.
8. Kindkiezers
Ze worden geschreven met het > teken en zijn alleen van toepassing op elementen van het eerste nestniveau. Elementen die in andere elementen zijn genest, worden niet beïnvloed.
Ul > li ( }
In het geval van contextuele selectors hebben ze invloed op alle onderliggende elementen (bijvoorbeeld als u ul li instelt), wat niet altijd handig is. Met onderliggende selectors kunt u alleen stijlen instellen voor elementen van het eerste nestniveau.
ul > li betekent hetzelfde als ul li , maar alleen li van het eerste nestniveau worden geselecteerd, die direct in ul zijn genest. Voor li-elementen die zijn genest binnen andere onderliggende li-elementen, zijn de regels niet langer van toepassing.
9. Kenmerkkiezers
Meestal gebruikt bij het werken met formulieren. Attribuutselectors worden geschreven met vierkante haken element[attribute] .
Voorbeelden van attribuutkiezers:
Invoer invoer div een een een een
In het bovenstaande voorbeeld kunt u met ~ een specifiek attribuut selecteren uit een door komma's gescheiden lijst met attributen, zoals:
10. Globale selector
Selector * selecteert Alle elementen. Het kan ook worden gebruikt om onderliggende elementen te markeren:
* ( marge: 0; opvulling: 0; ).content * ( omtrek: geen; )
11. Pseudo-klassen
Voorbeelden van pseudo-klassen:
A:link a: bezocht a:actief a:hover input:checked .clearfix:after () div:not(#container) p::eerste regel p::eerste letter
De ontkenning pseudo-class:not kan erg nuttig zijn. Als u bijvoorbeeld alle div's moet selecteren, behalve degene met de id-container.