Udformning af tekst og indhold på et websted med HTML-kode er kun en 'klump' af bygningen frontenden af et websted. En anden stor del af denne proces er at skabe den visuelle stil, der styres af reglerne for CSS.
Hver gang vi bygger et nyt websted eller foretager større layoutændringer til et eksisterende, ønsker vi uundgåeligt, at bestemte dele af vores websted skal se en bestemt måde ud. For at gøre dette er det vigtigt at forstå, hvordan man bruger de forskellige CSS-kombinatorer, såsom CSS-efterkommervælger. Denne CSS-kombinator giver mulighed for, at store dele af et websted kan modtage de samme stilændringer på én gang.
Hvad er en CSS Descendant Selector?
CSS efterkommervælger er en af fire forskellige CSS-kombinatorer. Når du tilføjer et enkelt mellemrum () mellem to vælgere, gælder de samme stilelementer også for den anden vælger, forudsat at efterkommerne deler den samme første vælger.
For at forstå en CSS efterkommervælger skal du først forstå CSS-vælgere. Den bedste måde at beskrive en vælger på er, at det er en CSS-operatør, der identificerer det stykke HTML, som du forsøger at style. Det kaldes en vælger, fordi den "vælger" hvilken bit HTML, der deler den samme operator som CSS-forælderen.
Almindelige eksempler på sådanne operatører er:
div
Dette er et tag, der definerer et afsnit af HTML, som kan omfatte ting som afsnit og indhold, eller:
li
som er en ordnet liste. Et andet lignende tag er:
ul
Dette opretter en ikke-ordnet liste. Mere komplekse mønstre kaldes også selektorer. Enkelt sagt fortæller en CSS efterkommervælger et websted, hvordan den skal se ud, når en vælger er 'indlejret' under en fælles forfader.
Den første vælger bliver CSS-forælder eller 'forfader'-vælgeren, og den anden vælger bliver efterkommeren. Tænk på, hvordan en filmappe fungerer: CSS-forælderen er som en mappe, der indeholder andre mapper, som kan indeholde egne mapper.
Af de fire kombinatorer er den eneste, der vælger alt, hvad der er indlejret under en bestemt CSS-forælder, CSS-efterkommervælgeren. Der er tre andre kombinatorer.
- Barnevælgeren (‘>’ i stedet for et enkelt mellemrum) vælger kun de elementer, der omtales af den første vælger i en kombinator. Hvis den første vælger er (div) og den anden vælger er (p), vælges kun (p) så længe den har (div) som en forfader. Hvis et afsnit oprettes under et nyt (afsnit), selvom det er i det samme (div), holdes stilreglerne ikke.
- Den tilstødende søskervælger ('+' i stedet for et enkelt mellemrum) vælger kun det element, der er tættest på den anden vælger i kombinatoren. Hvis den første vælger er (div) og den anden vælger er (p), vælges det første element, der bruger (p), men ikke (div).
- Den generelle søskervælger ('~' i stedet for et enkelt mellemrum) vælger hvert element undtagen dem, der er omtalt af den anden vælger. Hvis den første vælger er (div) og den anden vælger er (p), vælges hvert element, der ikke er (p).
Hvordan ser en CSS-efterkommervælger ud?
I det følgende eksempel på to forskellige CSS efterkommende vælgere, der fungerer side om side, er (div) den første vælger i den første kombinator, hvorimod (ul) er den første vælger i den anden kombinator. I begge CSS efterfølgende vælgere bruges (p) som den anden vælger.
Stilelementerne adskiller sig mellem (div) og (ul), men (p) bærer tydeligt egenskaberne hos sin CSS-forælder i begge tilfælde.
Hvorfor bruge en CSS Descendant Selector?
For at forstå vigtigheden af CSS-efterkommervælger er det værdifuldt at først forstå CSS-indlejrede vælgere.
Vi ønsker generelt, at visse stilregler skal gælde for hele et websted, såsom den specifikke størrelse eller skrifttype, som al afsnit (p) -tekst bruger som standard. Ligeledes kan HTML begynde at se rodet ud, hvis disse stilregler anvendes for hvert enkelt afsnit snarere end for hele webstedet.
Indlejret CSS er mulig ved brug af CSS-kombinatorer såsom CSS-efterfølgende vælger. Ved at "indlejre" CSS under en forældervælger er det muligt hurtigt og effektivt at fortælle et websted hvordan en bestemt vælger skal se ud i hvert scenarie, som CSS-forælderen henvises til.
Brug af en indlejret CSS-vælger giver os mulighed for at anvende de samme regler til at style flere sektioner af et websted ad gangen, hvilket giver os mulighed for at klare os med mindre arbejde, samtidig med at vores HTML holdes ren og uberørt.