Kio estas CSS-Descendenta Elektanto?

La strukturo de HTML-dokumento estas simila al familiara arbo. En via familio, vi havas viajn gepatrojn kaj aliajn, kiuj venis antaŭ vi. Jen viaj prapatroj. Infanoj kaj tiuj, kiuj sekvas vin sur tiu arbo estas viaj posteuloj. HTML funkcias simile. Elementoj, kiuj estas ene de aliaj elementoj, estas iliaj posteuloj. Ekzemple, ĉar preskaŭ ĉiu HTML-elemento estas ene de etikedoj, ili estus posteuloj de tiuj elementoj. Ĉi tiu rilato estas grava por kompreni kiam vi komencas labori kun CSS kaj bezonas celi specifajn elementojn por apliki vidajn stilojn.

CSS-Descendantaj Elektantoj

CSS-postea elektilo aplikas al la elementoj, kiuj estas ene de alia elemento (aŭ pli precize deklarita, elemento kiu estas posteulo de alia elemento). Ekzemple, neordigita listo havas etikedon kun etikedoj kiel posteuloj. Ni uzu la jenan HTML kiel ekzemplo:

• ĉi tio estas ligo

  La LI-etikedoj estas posteuloj de la UL-etikedo. La A etikedo estas posteulo de ambaŭ la LI (infano posteulo) kaj UL (nepojn posteuloj) etikedoj. Se vi pensas pri tio ĉi per la familiara arbo, la

  estus la patro, la
  • estus la infano de tiu elemento, kaj la estus la infano de la
  • kaj la nepo de la
    .

    Do kiel vi celus specifajn elementojn en retpaĝaro per ĉi tiuj posteaj elektiloj? Unue, vi devas difini descendantajn elektilojn per du (aŭ pli) tipaj elektiloj apartigitaj per spacoj.

    li {teksto-dekoracio: nenio; }

    En tiu ekzemplo, la stiloj nur aplikus al ligilo elemento () kiu estas posteulo de listo-ero elemento (

    • ). Ĉiuj aliaj ligiloj sur la paĝo, kiu ne estas posteulo de listo, ne akiris ĉi tiun stilon.

      Unu grava afero por memori estas, ke ĝi ne gravas kiom da etikedoj ili estas inter la etikedoj, kiujn vi povas uzi en via posteulo-elektilo. Se la dua elemento estas ĉirkaŭigita ene de la unua elemento, ĝi estos elektita kiel posteulo.

      Se vi volas elekti ĉiujn ankrojn, kiuj devenas de ul elementoj, vi skribus:

      ul a {teksto-dekoracio: nenio; }

      Nun ĉi tiuj stiloj apliki al iu ajn ligo, kiu estas posteulo de listo. Vi ankaŭ povus skribi ĉi tiun elektilon

      ul li a {teksto-dekoracio: nenio; }

      Ĉi tiu estas posteulo-elektilo, kiu uzas pli ol du tipajn elektilojn. En ĉi tiu kazo, ĉi tio apliki al ligoj, kiuj estas interne kiel listo-ero kaj ankaŭ ene de neordigita listo.

      Uzanta Klasajn Elektantojn kaj ID-Elektantojn

      La elektiloj, kiujn vi malsupreniras, ne devas ĉiam esti tipoj posteuloj. Ekzemple, imagu, ke vi havas areon de la retejo (kiel divido) kun ID-atributo de "afiŝtabulo". Vi povus starigi postean elektilon de tiu ID:

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

      Ĉi tio stilus la neordigitan liston, kiu estas posteulo de elemento kun ID de "afiŝtabulo". Vi povas fari la saman por klasaj valoroj.

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

      Ĉi tio supozas, ke la divido havas klasan valoron de "afiŝtabulo". La CSS supre stilus la

      elementon ene de iu ajn divido, kiu havas ĉi tiun klasan valoron.

      Vi povas akiri vere pezajn manojn kaj verbojn kun posteaj elektiloj. Ekzemple, se vi uzas Dreamweaver por skribi vian HTML-kodon , estas agordo kiam vi aldonas novajn CSS-regulojn, kiuj aŭtomate kreos la elektilon laŭ la lokigo de via kursoro en tiu paĝo. Kion Dreamweaver faras en ĉi tiuj okazoj kreas wildly verbose kaj longan postean elektilon. Tiu multa specifaĵo ne estas necesa por via CSS funkcii. Kion vi volas fari estas trovi ekvilibron inter posteulo, kiu estas sufiĉe specifa, por ke vi povu taladi malsupren al la ĝustaj elementoj, kiujn vi bezonas (sen stilo, kiujn vi ne deziras tuŝi) sen havi CSS-regulojn, kiuj havas elektilojn tro tro granda.