Find ud af, hvad en CSS Descendant Selector er

Opbygningen af ​​et HTML-dokument ligner et stamtræ. I din familie har du dine forældre og andre, der kom foran dig. Dette er dine forfædre. Børn og dem, der kommer efter dig på det træ, er dine efterkommere. HTML fungerer på en lignende måde. Elementer, der er inde i andre elementer, er deres efterkommere. For eksempel, da næsten hvert HTML-element er inde i tags, de ville være en efterkommer af det elementer. Dette forhold er vigtigt at forstå, når du begynder at arbejde med CSS og skal målrette mod bestemte elementer for at anvende visuelle stilarter.

CSS Descendants Selectors

En CSS efterkommer vælger gælder for de elementer, der er inde i et andet element (eller mere præcist angivet, et element der er efterkommer af et andet element). For eksempel har en uordnet liste et tag med tags som efterkommere. Lad os bruge følgende HTML som et eksempel:

• dette er et link

Det LI tags er efterkommere af UL tag. Det EN tag er en efterkommer af begge det LI (efterkommere) og UL (børnebarns efterkommer) tags. Hvis du tænker på at tænke på dette ved hjælp af eksempelet på stamtræet, så

ville være forælder, den
• ville være det elementets barn, og det ville være barnet til
• og børnebarnet af
  .

  Så hvordan vil du målrette bestemte elementer på en webside ved hjælp af disse efterkommere selektorer? For det første skal du definere efterkommere selektorer ved at bruge to (eller flere) type selektorer adskilt af mellemrum.

  li a {text-decoration: none; }

  I dette eksempel ville stilarterne kun gælde for et linkelement (), der er en efterkommer af et element i listen (

  • ). Alle andre links på siden, der ikke er efterkommer af en liste, ville ikke få denne stil.

    En vigtig ting at huske er, at det ikke betyder noget, hvor mange tags de er i mellem de tags, du muligvis bruger i din efterkommere vælger. Hvis det andet element er vedlagt hvor som helst inden for det første element, vælges det som en efterkommer.

    Hvis du vil vælge alle ankre, der er nedstammede fra ul elementer, ville du skrive:

    ul en {tekst-dekoration: ingen; }

    Nu vil disse stilarter gælde for ethvert link, der er en efterkommer af en listepost. Du kan også skrive denne vælger

    ul li a {text-decoration: none; }

    Dette er en efterkommer vælger, der bruger mere end to type selektorer. I dette tilfælde ville dette gælde for links, der er inde i som liste-element og også inde i en uordnet liste.

    Brug af Class Selectors og ID Selectors

    De selektorer, som du stiger ned fra, behøver ikke altid at være efterkommere. For eksempel forestille dig, at du havde et område på webstedet (som en division) med en id-attribut på "billboard". Du kan opsætte en efterkommer vælger ud af det id:

    #billboard ul {baggrundsfarve: #ccc; }

    Dette ville style den uordnede liste, der er en efterkommer af et element med et ID af "billboard". Du kan gøre det samme for klassens værdier.

    div.billboard ul {baggrundsfarve: #ccc; }

    Dette forudsætter, at divisionen har en klasseværdi af "billboard". CSS ovenfor ville style the

    element inde i enhver division, der har denne klasse værdi.

    Du kan få virkelig tunghændet og verbose med efterkommere selektorer. Hvis du f.eks. Bruger Dreamweaver til at skrive din HTML-kode, er der en indstilling, når du tilføjer nye CSS-regler, der automatisk skaber vælgeren baseret på placeringen af ​​din cursor på den pågældende side. Hvad Dreamweaver gør i disse tilfælde er at skabe en vildt verbose og langvarig efterkommere vælger. Den meget specificitet er ikke nødvendig for din CSS til at arbejde. Hvad du vil gøre, er at finde en balance mellem en efterkommer vælger, der er specifik nok, så du kan bore ned til de nøjagtige elementer, du har brug for (uden at stylere dem, du ikke ønsker at påvirke) uden at have CSS-regler, der har selektorer, der er alt for store stor.