Vierekkäiset CSS-valitsimet, yleinen valitsin ja niiden käyttötarkoitukset. CSS-lapsi- ja naapurivalitsimet CSS-naapurielementit
Kuvaus
Verkkosivun elementtejä kutsutaan vierekkäisiksi, kun ne seuraavat välittömästi toisiaan dokumenttikoodissa.
Syntaksi
E + F (tyylisääntöjen kuvaus)
Voit hallita vierekkäisten elementtien tyyliä käyttämällä plussymbolia (+), joka sijoitetaan kahden valitsimen E ja F väliin. Plus-merkin ympärillä olevat välilyönnit ovat valinnaisia. Tätä tyyliä sovelletaan elementtiin F, mutta vain jos se on elementin E vieressä ja seuraa välittömästi sitä. Katsotaanpa muutama esimerkki.
Lorem ipsum väri istu amet.
Tag on tunnisteen ali
Koska se on tämän säiliön sisällä. Vastaavasti
Toimii vanhempana .
Lorem ipsum väri istua amet.
Tunnisteet Ja eivät mene päällekkäin millään tavalla ja edustavat vierekkäisiä elementtejä. Se, että ne sijaitsevat säiliön sisällä Ei vaikuta heidän asenteeseensa. Lorem ipsum dolor sit amet, valitsija ihastuttava eliitti.
Naapuritunnisteet ovat tässä Ja , ja myös Ja . Samaan aikaan Ja viereisiä elementtejä ei käsitellä, koska niiden välissä on säiliö .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, valitsija ihastuttava eliitti.
Lorem ipsum dolor sit amet, valitsija ihastuttava eliitti.
Tämän esimerkin tulos on esitetty kuvassa. 1.
Riisi. 1. Punainen tekstin väri vierekkäisille valitsimille
Selaimet
Selain Internet Explorer 7 ei käytä tyyliä, jos valitsimien välillä on kommentti (B + /* plus */ I ).
Viereisen elementin valitsin valitsee elementin, joka sijaitsee dokumenttikoodissa suoraan toisen määritetyn elementin takana. Otetaan esimerkkinä pala html-koodia.
Kappale ja siinä rasvainen elementti, ja tässä se on taipuvainen elementti.
Tunnisteita on kolme:
, Ja . Tunnisteet Ja sisäkkäin säiliöön
He ovat hänen lapsia. Mutta suhteessa toisiinsa he ovat naapureita.
Viereisen valitsimen syntaksi on edellisen elementin valitsin, jota seuraa "+"-merkki, jota seuraa valitun elementin valitsin. Työstetään viereistä valitsinta:
Kappale ja siinä rasvainen elementti, ja tässä se on taipuvainen elementti.
Tässä rasvainen Ja korosti elementtejä, enemmän taipuvainen.
Esimerkissä voit nähdä, että viereisen elementin valitsin laukaistiin ensimmäisessä kappaleessa. Tässä ovat tunnisteet Ja mennä yksi toisensa jälkeen. Ja toisessa kappaleessa tunnistetta käytetään niiden välissä , nyt on kaksi muuta vierekkäistä tunnisteparia: + Ja + .
Virhe sisään tässä tapauksessa laskee tunnisteen tagin vieressä
Merkitse tähän on tunnisteen ali
Ja hän puolestaan on vanhempi .
Alla oleva esimerkki ei toimi:
Kappale ja siinä rasvainen elementti, ja tässä se on taipuvainen elementti.
Tässä rasvainen Ja korosti elementtejä, enemmän taipuvainen.
Todellisempi esimerkki
Katsotaanpa, kuinka viereinen valitsin toimii realistisemman esimerkin avulla. Suurissa artikkeleissa, jotka sisältävät useita tunnisteilla merkittyjä osia
, on suositeltavaa lisätä ylämarginaalia (margin-top-ominaisuus). 30 pikselin sisennys tekee tekstistä luettavissa. Mutta jos tag tulee heti perään , ja tämä voi olla artikkelin alussa, ylimmässä luetelmassa tunnisteen yläpuolella tulee tarpeeton. Tämä ongelma voidaan ratkaista viereisen elementin valitsimella.
, ja tämä voi olla artikkelin alussa, ylimmässä luetelmassa tunnisteen yläpuolella tulee tarpeeton. Tämä ongelma voidaan ratkaista viereisen elementin valitsimella.
Tässä on html-koodi ja esimerkki siitä, kuinka viereisen elementin valitsin toimii.
Hei!
Otsikko h2
Otsikko h2
Kappaleen teksti kertoo uskomattomista seikkailuista.
Otsikko h2
Kappaleen teksti kertoo uskomattomista seikkailuista.
Otsikko h2
Kappaleen teksti kertoo uskomattomista seikkailuista.
Viereisen valitsintyökalun avulla on myös kätevää säätää otsikon ja osan ensimmäisen kappaleen välistä sisennystä, esimerkissämme nämä ovat tunnisteita
