Katso CSS3 n ensimmäisen tyyppinen rakennevalitsin

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

Yksi asia, jota rakastan CSS3: sta, on uusi lisäys, jonka avulla voimme kohdistaa elementtejä erityisesti ilman, että luotamme siihen luokka, id tai muu elementti-attribuutti, ja sellainen, jonka me käsittelemme, on seuraava valitsin, : Ensimmäinen-of-tyyppinen.

: Ensimmäinen-of-tyyppinen valitsin kohdistuu määritetyn elementin ensimmäiseen lapseen, esimerkiksi alla oleva katkoviiva kohdistuu ensimmäiseen H2 Web-sivulla.

 h2: ensimmäisen tyypin / * tyyliilmoitus * /

: Ensimmäinen-of-tyyppinen on myös yhtä suuri : Nnen-of-tyypin (1), sen sijaan, että valitsisit vain ensimmäinen tyyppiä, voimme edelleen valita toisen, kolmannen ja niin edelleen. Seuraava katkaisu kohdistuu toiseen H2 elementti verkkosivulla.

 h2: nth-of-type (2) / * tyyliilmoitus * /

: Ensimmäinen-of-tyyppinen” vs. “:ensimmäinen lapsi”

Se voi tuntua siltä, että nämä kaksi valitsinta tekevät samaa, mutta näin ei ole. Katsotaan seuraavaa esittelyä:

Oletetaan, että meillä on viisi kappaleosaa, jotka on kääritty a div, kuten tämä:

  1 kohta
 2 kohta
 3 kohta
 4 kohta
 5 kohta

Nyt haluaisimme valita ensimmäisen kohdan käyttämällä :ensimmäinen lapsi valitsin.

 p: ensimmäinen lapsi pehmuste: 5px 10px; raja-säde: 2px; tausta: # 8960a7; väri: #fff; raja: 1px kiinteä # 5b456a;

Ja kuten oletimme, ensimmäinen kappale valitaan onnistuneesti.

: ensimmäisen lapsen esittely

Kuitenkin, kun me lisää toinen elementti ennen Ensimmäisessä kohdassa sanotaan a H1, kuten katkelman alla:

  Otsake 1
 1 kohta
 2 kohta
 3 kohta
 4 kohta
 5 kohta

ensimmäistä kohtaa ei valita, ensimmäisen lapsen sisällä div on enää kappale, mutta on nyt H1.

Niin, tämä on tilanne, jossa : Ensimmäinen-of-tyyppinen valitsin tulee ratkaisemaan ongelma.

 p: ensimmäisen tyyppinen pehmuste: 5px 10px; raja-säde: 2px; tausta: # a8b700; väri: #fff; raja: 1px kiinteä # 597500;

: ensimmäisen tyyppinen demo

“Kestää” Valitsin

Missä on “ensimmäinen”, sitten on myös “kestää”.

Kahden edellä mainitun selektorin kääntöpuoli on seuraavat kaksi selektoria; :viimeinen lapsi ja : Viimeinen-of-tyyppinen. Ne ovat pohjimmiltaan samat kuin edellä mainitut kaksi, paitsi jos ne kohdistuvat määritetyn elementin viimeinen lapsi.

Esimerkiksi alla oleva katkelman kohteena on viimeinen kappale div.

 p: viimeinen lapsi pehmuste: 5px 10px; raja-säde: 2px; tausta: # 8960a7; väri: #fff; raja: 1px kiinteä # 5b456a;

: viimeisen lapsen esittely

Ja tämä katkaisu kohdistuu myös viimeiseen kappaleeseen samassa tilanteessa kuin olemme keskustelleet edellä; tällä kertaa

sitä seuraa suoraan toinen elementti.

 p: viimeinen-tyypin pehmuste: 5px 10px; raja-säde: 2px; tausta: # a8b700; väri: #fff; raja: 1px kiinteä # 597500;

: viimeinen-tyyppinen demo

Selectivizr

Kuten kaikki muutkin CSS3: n uudet ominaisuudet, näitä selaimia ei tueta vanhoissa selaimissa lähinnä Internet Explorer 6 - 8, poikkeuksella :ensimmäinen lapsi valitsin, koska se on lisätty CSS2.1: n jälkeen. Sen suhteellinen :viimeinen lapsi lisättiin vain CSS3: een.

Jos siis kaikki nämä täällä mainitut valitsimet ovat todella tarpeellisia Web-sivustollesi, voit käyttää JavaScript-kirjastoa, jota kutsutaan Selectivizr jäljitellä näitä CSS3-valitsimen toimintoja.

Selectivizr on riippuvainen muista JavaScript-kirjastoista toimiakseen, kuten jQuery, Dojo, Prototype ja MooTools; ja nähdään vertailulevystä virallisella verkkosivustolla, MooTools näyttää voivan käsitellä kaikkia valintoja.

Joten, sisällytetäänkö se yhdessä Selectivizrin kanssa seuraavasti:

Yllä oleva ehdollinen kommentti varmistaa, että nämä kirjastot ladataan vain Internet Explorer 8: ssa ja sen alapuolella.

Lopuksi voit tarkastella demoa seuraavista linkeistä ja sen pitäisi nyt toimia sekä nykyaikaisissa että vanhoissa selaimissa (IE8 ja sen alla). Voit myös ladata lähdetiedoston tarkempaa tutkimusta varten. Nauttia.

esittely
Lataa lähde