Mis on CSS-i järglaste valija?

HTML-dokumendi struktuur sarnaneb sugupuudega. Teie perekonnas on teie vanemad ja teised, kes tulid teie juurde. Need on teie esivanemad. Lapsed ja need, kes tulevad teie pärast sellelt puudelt, on teie järeltulijad. HTML töötab sarnaselt. Elemendid, mis on teiste elementide sees, on nende järeltulijad. Näiteks, kuna peaaegu iga HTML-element on sees -märgis, oleksid nad selle elemendi järeltulijad. See suhe on oluline mõista, kui hakkate CSSiga töötama, ning visuaalsete stiilide rakendamiseks tuleb sihtida konkreetseid elemente.

CSS järglased valijad

CSS-i järglaste valija kehtib elementidele, mis asuvad mõnes teises elemendis (või täpsemalt öeldes, element, mis on teise elemendi järeltulija). Näiteks on järjestamata loendil sildid, millel on silte järglased. Kasutame näiteks järgmist HTML-i:

• see on link

  LI-märgendid on UL-märgise järeltulijad. A-silt on nii LI (lapse järeltulija) kui ka UL-i (lapselapsejärgne) taganema järeltulija. Kui mõtlete selle üle perekonnapuu näite kasutamisest, on

  vanem,
  • oleks selle elemendi laps ja oleks
  • laps ja lapselaps
    .

    Niisiis, kuidas te suunaksite nende leibkondade valijatega veebisaidi konkreetseid elemente? Esiteks peate määratlema järglas valijad, kasutades kahe (või enama) tüüpi selektorit, mis on eraldatud tühikutega.

    li a {text-decoration: none; }

    Selles näites kasutaksid stiilid ainult linkielementi (), mis on nimekirja-elemendi elemendi järeltulija (

    • ). Kõik sellel lehel olevad lingid, mis ei ole loendiüksuse järeltulijad, ei saaks seda stiili.

      Üks oluline asi, mida meeles pidada, on see, et pole oluline, kui palju märgendeid nad asuvad teie järeltulija valijates kasutatavate siltide vahel. Kui teine ​​element on esimese elemendi sees kuskil, valitakse see järglasena.

      Kui soovite valida kõik elemendist ulatuvad ankrud, siis kirjuta:

      ul a {text-decoration: none; }

      Nüüd kehtivad need stiilid mis tahes lingile, mis on loendiüksuse järeltulija. Võite selle valija kirjutada

      ul li a {text-decoration: none; }

      See on järeltulija valija, mis kasutab rohkem kui kahte tüüpi selektorit. Sellisel juhul kehtib see linkide kohta, mis on loendiüksuse sees ja ka järjestatud loendi sees.

      Klasside valijate ja ID-valijate kasutamine

      Valijatest, kellest sa altad, ei pea alati olema järglased. Näiteks, kujutage ette, et teil oli saidi ala (nagu jagunemine), millel on "stendi" ID-atribuut. Sa võiksid selle ID-st valida järeltulija valija.

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

      See salvestaks järjestamata loendi, mis on elemendi järeltulija, kellel on "stendi" ID. Te saate sama teha klassi väärtuste jaoks.

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

      See eeldab, et jagunemisel on "stendi" klassi väärtus. Ülaltoodud CSS-vormingus oleks stiilne

      element mis tahes sellel klassil oleva jaotise sees.

      Võite saada tõeliselt raske-ja verbose koos järglased selektorid. Näiteks kui kasutate HTML-koodi kirjutamiseks Dreamweaverit, on seade, kui lisate CSS-i reeglid, mis selektorit automaatselt loovad, vastavalt selle lehe kursori paigutusele. See, mida Dreamweaver sellel juhtudel kasutab, loob metsikult verbi ja pika järeltulija valija. Teie CSS-i jaoks ei ole see spetsiifilisus vajalik. Mida soovite teha, on leida tasakaal soovija valitud selektori vahel, mis on piisavalt spetsiifiline, et saaksite puurida täpsed elemendid, mida vajate (ilma stiilita need, mida te ei soovi mõjutada) ilma CSS-reegliteta, millel on liiga palju selektoreid suur.