Sådan arbejder du med CSS3 Pattern Selectors - dummies

I nogle tilfælde skal et valg, du skal lave i CSS3, ikke noget med enten tags eller attributter, men mønsteret, hvor objekterne vises på siden. Du kan f.eks. Kun vælge det første objekt, uanset hvad det pågældende objekt kan være.

I nogle tilfælde vil du formatere med alternative medlemmer af en liste eller et andet repetitivt dataelement på en eller anden måde for at gøre det lettere for brugeren at se hvert element individuelt. Følgende liste fortæller dig om mønsterselektorer, som dokumenter ofte bruger.

: første bogstav: Vælg det første bogstav i det angivne objekt. Denne vælger er nyttig til at skabe specielle tekstmæssige effekter, som f.eks. Drop caps.

Det er yderst sjældent at se, at de fleste mønstervælgere bruges alene, fordi du normalt ikke ønsker at formatere det første bogstav for hvert objekt på siden på en bestemt måde. Generelt ser du mønstervælgere, der anvendes i kombination med en attributvælger, såsom klassevælgeren eller med en bestemt tagvælger.

Brug af mønsterselektorer globalt kan have uventede resultater eller endda forårsage, at en applikation mislykkes (afhængigt af hvordan applikationens kode og CSS interagerer).
: første linje: Vælger den første linje i det angivne objekt.
: før: Vælger området umiddelbart før det angivne objektindhold. Denne vælger er normalt forbundet med indholdsegenskaben for at indsætte noget specielt før indholdet i det eksisterende objekt.
: efter: Vælger området umiddelbart efter det angivne objektindhold. Denne vælger er normalt forbundet med indholdsegenskaben for at indsætte noget specielt før indholdet i det eksisterende objekt.
: Første-of-type: Vælger det første objekt af en bestemt type.

Selv om specifikationen ikke rent faktisk fortæller dig, at du skal angive en type eller en forælder, vil nogle mønstervælgere ikke fungere uden en. Typisk ser du: førstevalgsvælgeren, der bruges med en tagvælger (f.eks. P: førstegangs type), men den kan også bruges med en attributvælger. Alle de andre typer og børnemønster vælger det samme.
: sidste-of-type: Vælger det sidste objekt af en bestemt type.
: only-of-type: Vælger det eneste objekt af en bestemt type. Hvis der er mere end et objekt af en bestemt type, er der ikke valgt noget valg.
: nth-of-type ( Nummer ): Vælger det specificerede objekt af en bestemt type.
: n-sidste-of-type ( Nummer ): Vælger det specificerede objekt af en bestemt type, der begynder fra slutningen af objektlisten.
: første barn: Vælger det første barn i en bestemt genstand. Denne vælger bruges som regel til at anvende speciel formatering til den første genstand i en liste eller tabel.
: sidste barn: Vælger det sidste barn af en bestemt forælder.
: only-child: Vælger det eneste barn i en bestemt forælder. Når en forælderobjekt har mere end et barn, er der ikke valgt noget valg.
: nth-child ( Number ): Vælger det specificerede barn til en bestemt forælder.
: nde-sidste-barn ( Nummer ): Vælger det specificerede barn til en bestemt forælder, der begynder fra slutningen af børnelisten.

Mønstervalgere kan skabe nogle interessante effekter på dit websted. Følgende procedure tager et hurtigt kig på, hvad disse selektorer kan gøre. Det er vigtigt at huske, at du vil se selektorer, herunder mønstervalgere, ofte, så betrag det som et udgangspunkt.

Opret ExternalCSS. HTML og ExternalCSS. CSS-filer og kopiere dem til en ny mappe.
Åbn ExternalCSS. HTML.
Indtast følgende kode efter den eksisterende
-tag i filen og gem ændringerne på disken.
```
En
To
Tre
Fire
Fem
```
I dette tilfælde tilføjer du en liste til siden for at gøre det lettere at registrere mønstre. Selvfølgelig er mønstre ikke begrænset til lister eller tabeller. Du kan bruge dem med ethvert arrangement af genstande, som kunne udgøre et valg ved et mønster.
Åbn ExternalCSS. CSS.

Indtast følgende kode efter de eksisterende stilarter og gem ændringerne på disken.

. ListItem: første bogstav {font-size: xx-large;}. ListItem: efter {indhold: "27A8"; skrifttypestørrelse: x-stor; farve: Rød;}. ListItem: nth-child (ulige) {baggrundsfarve: LightBlue;}. ListItem: nth-child (2n + 2) {baggrundsfarve: LightGreen;}

Genindlæs testsiden.

Du ser virkningen af at gøre stilændringen. Til at begynde med starter hver kugle med et ekstra stort bogstav.

I slutningen af hver kugle ser du en særlig pilkarakter. Bemærk, hvordan CSS bruger 27A8 til at oprette denne karakter. Når du ser diagrammer som den på ikreator. com og den ene på petterhesselberg. com, du ser disse tegnkoder præsenteret med en & # -kombination i begyndelsen. CSS bruger de samme numeriske koder, men afhænger af en tilbageslag (/).

Vælgeren: nth-child () kan bruges på flere måder. Selv om eksemplet ikke viser det, kan du angive et nummer for at vælge et bestemt barnelement. Men denne vælger accepterer også en række andre interessante input. Du kan for eksempel bruge de lige og ulige søgeord til at vælge de lige eller ulige objekter i en liste.

Du kan også angive en ligning, der bruger n til at angive det aktuelle objekt. Når browseren indtaster 0 for n, bliver ligningen f.eks. 2 * 0 + 2 eller element 2. Hvis du vil starte med element 3 i stedet, vil du bruge 2n + 3. Den ligning, du giver, kan være af en hvilken som helst kompleksitet, der kræves for at frembringe det ønskede resultat.