Kas ir CSS pēcteča atlasītājs?

HTML dokumenta struktūra ir līdzīga ģimenes kokam. Jūsu ģimenē ir jūsu vecāki un citi, kas nāca pirms jums. Šie ir jūsu senči. Bērni un tie, kas nāk pēc tevis šajā kokā, ir jūsu pēcnācēji. HTML darbojas līdzīgi. Elementi, kas atrodas citu elementu iekšpusē, ir to pēcnācēji. Piemēram, tā kā gandrīz visi HTML elementi atrodas tagu iekšpusē, tie būtu šīs elementi pēctecis. Šīs attiecības ir svarīgas, lai saprastu, kad sākat strādāt ar CSS, un, lai izmantotu vizuālos stilus, ir jāpievērš īpaša uzmanība.

CSS pēcnācēju atlasītāji

CSS pēcnācējs selektors attiecas uz elementiem, kas atrodas citā elementā (vai precīzāk norādīts, elements, kas ir pēctecis par citu elementu). Piemēram, nepareizajam sarakstam ir atzīme ar atzīmēm kā pēcnācējiem. Kā piemēru izmantosim šādu HTML:

• šī ir saite

  LI tagi ir UL tagu pēcteči. A tags ir pēc LI (bērna pēcnācējs) un UL (mazbērnu pēctecis) tagu pēctecis. Ja jūs domājat par to domāt, izmantojot ģimenes koka piemēru,

  būs vecāks,
  • būtu šī elementa bērns, un būtu bērna
  • un mazbērns
    .

    Tātad, kā jūs mērķētu uz konkrētiem tīmekļa lapas elementiem, izmantojot šos pēctecīgos atlasītājus? Pirmkārt, jums ir jādefinē pēcteču selektori, izmantojot divus (vai vairākus) tipa selektorus, kas atdalīti ar atstarpēm.

    li a (teksta apdare: nav; }

    Šajā piemērā stili attiecas tikai uz saites elementu (), kas ir saraksta elementa elementa (

    • ) pēctecis. Visas šīs lapas saites, kas nav saraksta vienības pēctecis, nesaņems šo stilu.

      Viena no svarīgām lietām, kas jāatceras, ir tas, ka nav svarīgi, cik daudz tagu tie atrodas starp tagiem, kurus jūs varat izmantot jūsu pēcnācēju atlasītājā. Ja otrais elements ir slēgts visur pirmajā elementā, tas tiks izvēlēts kā pēctecis.

      Ja vēlaties atlasīt visus enkrus, kuri ir iegūti no ul elementiem, jūs rakstītu:

      ul a {text-decoration: none; }

      Tagad šie stili tiks attiecināti uz jebkuru saiti, kas ir saraksta vienības pēctecis. Jūs varētu arī rakstīt šo selektoru

      ul li a {teksta apdare: nav; }

      Tas ir pēcnācējs selektors, kas izmanto vairāk nekā divu veidu selektorus. Šajā gadījumā tas attiecas uz saitēm, kas atrodas kā saraksta vienums, kā arī neierobežotu sarakstu iekšpusē.

      Izmantojot klases selektorus un ID atlasītājus

      Atlasītie atlasītāji, no kuriem jūs dilstat, nav vienmēr tipa pēcnācēji. Piemēram, iedomājieties, ka jums bija vietnes apgabals (piemēram, rajons) ar "stenda" ID atribūtu. Varat iestatīt šī ID pēctecēja selektora:

      #billboard ul {background-color: #ccc; }

      Tas izveidotu neierobežotu sarakstu, kas ir elementa pēctecis ar "stenda" ID. Jūs varat darīt to pašu klases vērtībām.

      div.billboard ul {background-color: #ccc; }

      Tas nozīmē, ka sadalījumam ir "stenda" klases vērtība. Iepriekš minētais CSS stils elementu

      iekšpusē jebkurā sadalījumā, kuram ir šī klases vērtība.

      Jūs varat iegūt patiešām smago roku un verbose ar pēcnācējiem selektori. Piemēram, ja jūs izmantojat Dreamweaver, lai uzrakstītu savu HTML kodu , ir iestatījums, ja pievienojat jaunus CSS noteikumus, kas automātiski izveidos atlasītāju, pamatojoties uz kursora izvietojumu šajā lapā. Ko Dreamweaver šādos gadījumos veic, lai izveidotu pārsteidzošu verbālo un garo pēcnācēju selektoru. Lai jūsu CSS darbotos, šī specifika nav nepieciešama. Viss, ko vēlaties izdarīt, ir atrast līdzsvaru starp pēcnācēju selektoru, kas ir pietiekami precīzs, lai jūs varētu noskaidrot precīzus nepieciešamos elementus (bez stilā tiem, kurus jūs nevēlaties ietekmēt) bez CSS noteikumiem, kuriem ir pārāk daudz selektoru liels