CSS3 Selectors - dummies

En del av CSS3 For Dummies Cheat Sheet

CSS3 gir tilgang til et bredt utvalg av selektorer som du bruker til å identifisere hvilket element du vil format på en side. En väljare definerer hva som skal formateres; stilen definerer hvordan du formaterer den. Det er imidlertid lett å gå inn i valgoverbelastning. De fleste utviklere bruker en kombinasjon av tag og attributt selectors for å utføre alle valgrelaterte oppgaver. Her er de brukte merkelektorene, som gir generelle utvalgsmetoder.

• Tag , Tag : Å skille to koder med et komma betyr at du velger begge koder, uavhengig av hvor de vises i dokumentet. For eksempel, ved å bruke p, vil div velge alle

  og koder i dokumentet.

• Tag >> Tag : Ved å skille mellom to tagger med et større enn tegn (>), forteller nettleseren å velge en tagg som har en annen tag som foreldre. Hvis du for eksempel har og bruker div> p, vil nettleseren velge

  -taggen.

  Tag

• Tag : Hvis du skiller to koder med et mellomrom, forteller nettleseren å velge en kode som vises i en annen tag. Denne väljaren adskiller seg fra å bruke et større enn tegn fordi den første merket ikke trenger direkte å vises umiddelbart før den andre merket. Hvis du for eksempel har og bruker div> p, vil ikke nettleseren velge noe. Men hvis du bruker div p i stedet, vil nettleseren velge

  -taggen.

  Tag

• + Tag : Å skille to tagger med et plustegn (+) forteller at nettleseren velger en tag som vises umiddelbart etter en annen tag. Hvis du for eksempel har og bruker div + p, vil nettleseren velge

  -taggen. Legg merke til at

  -taggen ikke vises i taggen, den vises etter taggen.

  Tag

• ~ Tag : Å skille to tagger med en tilde (~) forteller nettleseren å velge hver tag som vises etter en annen tag. Hvis du for eksempel har og bruker div ~ p, vil nettleseren velge begge

  koder. Dette adskiller seg fra div + p (der nettleseren vil velge bare den første

  taggen som følger taggen).

  : root

• : Velger rotasjonselementet i dokumentet. Roterelementet avhenger av dokumenttypen. Denne velgeren brukes vanligvis med XML-dokumenter, men du kan potensielt bruke den med hvilken som helst dokumenttype. For å gi fint utvalg av bare de riktige elementene, bruker utviklere ofte attributtvelger i stedet for tagvelgerne. Her er attributtvelgerne som utviklere vanligvis bruker.

. ClassName

• : Velger objekter som har en klasseattributtverdi med det oppgitte navnet. For eksempel,. StdPara ville velge hvert objekt som har et klasse = "StdPara" attributt uten hensyn til objekttype. #Id

• : Velger objekter som har en idattributtverdi med det oppgitte navnet. For eksempel vil #ThirdHeader velge hvert objekt som har et id = "ThirdHeader" -attributt uten hensyn til objekttype. : lang (Språkidentifikator)

• : Velger objekt med spesifisert språkverdi. For eksempel: lang (en) ville velge ethvert objekt som bruker engelsk som sitt språk. Her er en liste over vanlige språkidentifikatorer. [

• Attribut ] : Velger alle objekter som bruker et bestemt attributt uavhengig av attributtens verdi. For eksempel vil [lang] velge alle objekter som bruker langattributtet.

• Egenskap = Verdi ] : Velger alle objekter som har en attributt med en bestemt verdi. Verdien må samsvare nøyaktig. For eksempel vil [lang = "en-us"] velge hvert objekt som har et språkattributt med en verdi på engelsk.

• Egenskap ~ = Verdi ] : Velger alle objekter som har et attributt som inneholder en bestemt verdi. Søkeverdien trenger bare å vises et sted innenfor verdien som helhet. For eksempel velger [title ~ = "Secondary"] alle objekter med tittelattributter som inneholder ordet Secondary som et diskret ord. Denne velgeren fungerer med hele ord.

• Egenskap | = Verdi ] : Velger alle objekter som har en attributt som begynner med en bestemt verdi. Søkeverdien må vises i begynnelsen av verdien som helhet, men trenger ikke å være hele verdien. For eksempel velger [title | = "Sub"] alle objekter med tittelattributter som begynner med ordet Sub. Denne velgeren fungerer sammen med bindestreger.

• Egenskap ^ = Verdi ] : Velger alle objekter som har en attributt som begynner med en bestemt verdi. For eksempel velger [title | = "Sub"] alle objekter med tittelattributter som begynner med ordet Sub. Denne form for velgeren er mindre restriktiv enn attributten [Attributt | = Verdi]. Ved å bruke dette skjemaet velges tittel = "SubHeader", title = "Sub Header", eller title = "Sub-Header" med samme pålitelighet.

• Egenskap $ = Verdi ] : Velger alle objekter som har en attributt som ender med en bestemt verdi. For eksempel velger [title $ = "Secondary"] alle objekter med tittelattributter som slutter med ordet Secondary. Denne form for attributtet er ikke-restriktiv - det krever ingen spesiell formatering.

• Egenskap * = Verdi ] : Velger alle objekter som har et attributt som inneholder en bestemt verdi. For eksempel velger [title $ = "Secondary"] alle objekter med tittelattributter som inneholder med ordet Secondary. Denne form for velgeren er mindre restriktiv enn attributten [ Attribut ~ = Verdi ]. Ved å bruke dette skjemaet velger du title = "SecondaryParagraph", title = "Secondary Paragraph", eller title = "Secondary-Paragraph" med samme pålitelighet. En spesiell not () -velger fullfører felles utvalg av selektorer.For å fortelle nettleseren ikke å velge en bestemt tag eller attributt, men for å velge alt annet i stedet, bruker du ikke: () -velgeren. For eksempel: ikke (p) ville velge alt, men avsnittetiketter på siden.