CSS3-kiezers - dummies

uit te voeren. Een deel van CSS3 For Dummies Cheat Sheet

CSS3 biedt toegang tot een grote verscheidenheid aan selectors die u gebruikt om te identificeren welk element voor formaat op een pagina. Een selector definieert wat te formatteren; de stijl definieert hoe deze moet worden geformatteerd. Het is echter gemakkelijk om overbelast met de selector te gaan. De meeste ontwikkelaars gebruiken een combinatie van tag- en attribuutselectoren om alle selector-gerelateerde taken uit te voeren. Hier zijn de veelgebruikte tagselectoren, die algemene selectiemethoden bieden.

• Tag , Tag : Het scheiden van twee tags met een komma betekent beide tags selecteren, ongeacht waar ze in het document voorkomen. Als u p bijvoorbeeld gebruikt, selecteert div alle

  en tags in het document.

• Tag >> Tag : Het scheiden van twee tags met een groter dan teken (>) vertelt de browser om een ​​tag te selecteren die een andere tag als ouder heeft. Als u bijvoorbeeld gebruikt en div> p gebruikt, selecteert de browser de tag

  .

  Tag

• Tag : Door twee tags te scheiden door een spatie, vertelt de browser om een ​​tag te selecteren die in een andere tag wordt weergegeven. Deze selector verschilt van het gebruik van een groter dan teken dat de eerste tag niet direct direct voor de tweede tag hoeft te verschijnen. Als u bijvoorbeeld gebruikt en div> p, zal de browser niets selecteren. Als u in plaats daarvan div p gebruikt, selecteert de browser de tag

  .

  Tag

• + Tag : Het scheiden van twee tags met een plusteken (+) vertelt de browser om een ​​tag te selecteren die onmiddellijk na een andere tag verschijnt. Als u bijvoorbeeld gebruikt en div + p gebruikt, selecteert de browser de tag

  . Let op dat de tag

  niet in de tag wordt weergegeven, maar na de tag wordt weergegeven.

  Tag

• ~ Tag : Het scheiden van twee tags met een tilde (~) vertelt de browser om elke tag te selecteren die na een andere tag verschijnt. Als u bijvoorbeeld gebruikt en div ~ p gebruikt, selecteert de browser beide

  -tags. Dit verschilt van div + p (waarbij de browser alleen de eerste

  -tag na de tag selecteert).

  : root

• : Selecteert het rootelement van het document. Het rootelement is afhankelijk van het documenttype. Deze selector wordt normaal gesproken gebruikt met XML-documenten, maar u kunt deze mogelijk gebruiken met elk documenttype. Om fijne selectie van precies de juiste elementen te bieden, gebruiken ontwikkelaars vaak attribuutselectoren in plaats van tagselectoren. Hier zijn de attribuutselectoren die ontwikkelaars gewoonlijk gebruiken.

. ClassName

• : Selecteert alle objecten die een klassenkenmerkwaarde hebben met de opgegeven naam. Bijvoorbeeld,. StdPara zou elk object selecteren dat een class = "StdPara" -attribuut heeft zonder rekening te houden met het objecttype. #Id

• : Selecteert alle objecten met een id-attribuutwaarde met de opgegeven naam. #ThirdHeader zou bijvoorbeeld elk object selecteren dat een id = "ThirdHeader" -attribuut heeft zonder rekening te houden met het objecttype. : lang (Language Identifier) ​​

• : Selecteert een object met de opgegeven taalwaarde. Bijvoorbeeld: lang (en) zou elk object selecteren dat Engels als taal gebruikt. Hier is een lijst met veelgebruikte taal-ID's. [

• Kenmerk ] : Selecteert alle objecten die een bepaald kenmerk gebruiken, ongeacht de waarde van het kenmerk. [Lang] zou bijvoorbeeld alle objecten selecteren die het lang-attribuut gebruiken. [

• Attribuut = Waarde ] : Selecteert alle objecten met een kenmerk met een bepaalde waarde. De waarde moet exact overeenkomen. [Lang = "en-us"] zou bijvoorbeeld elk object selecteren met een taalkenmerk met de waarde Engels. [

• Attribuut ~ = Waarde ] : Selecteert alle objecten met een kenmerk dat een bepaalde waarde bevat. De zoekwaarde hoeft alleen ergens binnen de waarde als geheel te worden weergegeven. [Title ~ = "Secondary"] selecteert bijvoorbeeld alle objecten met titelkenmerken die het woord Secundair als een afzonderlijk woord bevatten. Deze selector werkt met hele woorden. [

• Kenmerk | = Waarde ] : Selecteert alle objecten met een kenmerk dat met een bepaalde waarde begint. De zoekwaarde moet aan het begin van de waarde als geheel worden weergegeven, maar hoeft niet de volledige waarde te zijn. [Title | = "Sub"] selecteert bijvoorbeeld alle objecten met titelkenmerken die beginnen met het woord Sub. Deze selector werkt met afgebroken termen. [

• Kenmerk ^ = Waarde ] : Selecteert alle objecten met een kenmerk dat met een bepaalde waarde begint. [Title | = "Sub"] selecteert bijvoorbeeld alle objecten met titelkenmerken die beginnen met het woord Sub. Deze vorm van de selector is minder beperkend dan het attribuut [Attribuut | = waarde]. Als u dit formulier gebruikt, wordt title = "SubHeader", title = "Sub Header" of title = "Sub-Header" met dezelfde betrouwbaarheid geselecteerd. [

• Kenmerk $ = Waarde ] : Selecteert alle objecten met een kenmerk dat eindigt met een bepaalde waarde. [Title $ = "Secondary"] selecteert bijvoorbeeld alle objecten met titelattributen die eindigen op het woord secundair. Deze vorm van het attribuut is niet-beperkend - het vereist geen speciale opmaak. [

• Kenmerk * = Waarde ] : Selecteert alle objecten met een kenmerk dat een bepaalde waarde bevat. [Title $ = "Secondary"] selecteert bijvoorbeeld alle objecten met titelattributen die het woord Secondary bevatten. Deze vorm van de selector is minder beperkend dan het kenmerk [ Attribuut ~ = waarde ]. Met behulp van dit formulier selecteert u title = "SecondaryParagraph", title = "Secondary Paragraph" of title = "Secondary-Paragraph" met dezelfde betrouwbaarheid. Een speciale niet-selector () maakt de gemeenschappelijke reeks selectors compleet.Om de browser te vertellen niet een bepaalde tag of een specifiek kenmerk te selecteren, maar om al het andere te selecteren, gebruikt u de: not () selector. Bijvoorbeeld: niet (p) zou alles behalve de alineatags op de pagina selecteren.