: kohde - CSS-temppuja | CSS-almanakka 2025

:targetPseudo valitsin CSS vastaa, kun hash URL ja id elementin ovat samat. Esimerkiksi, jos nykyinen URL on:

https://css-tricks.com/#voters

Ja tämä oli olemassa HTML: ssä:

 Content

Tämä valitsin vastaisi:

:target ( background: yellow; )

Ja tällä sectionelementillä olisi keltainen tausta.

Kun kyseinen yleinen valitsin (joka vastaa mitä tahansa, joka sattuu olemaan kohde), jos URL-osoite muuttuisi loppuun #faqja siellä olisi toinen elementti, jonka tunnus on faq, kyseinen valitsin sopisi uudelleen ja #faqelementillä olisi keltainen tausta.

Voit rajoittaa sitä määrittämällä tarkasti kohteet, joista haluat kohdistaa

#voters:target ( )

Milloin käyttäisit tätä?

Yksi mahdollisuus on, kun haluat tyylin "osavaltioiden" kanssa. Kun sivulla on tietty hash, se on siinä tilassa. Se ei ole aivan yhtä monipuolinen kuin luokkien nimien manipulointi (koska niitä voi olla vain yksi ja se voi liittyä vain yhteen elementtiin), mutta se on samanlainen. Kaikki mitä voit tehdä vaihtamalla luokkaa tilan vaihtamiseksi, voit tehdä, kun elementti on :target. Esimerkiksi: vaihda värejä, vaihda sijaintia, vaihda kuvia, piilota / näytä asioita, mitä tahansa.

Käytän näitä nyrkkisääntöjä, kun :targeton hyvä valinta:

Kun tarvitaan "valtio"
Kun hypätä alas / hash-linkkäyttäytyminen on hyväksyttävää
Kun on hyväksyttävää vaikuttaa selaimen historiaan

Kuinka saat URL-osoitteisiin hajautuksia?

Yleisin tapa on, että käyttäjä napsauttaa linkkiä, joka sisältää hajautusmerkin. Se voi olla sisäinen (saman sivun) linkki tai täysin hyväksytty URL-osoite, joka sattuu päättymään hashilla ja arvolla. Esimerkkejä:

Go To There Go To There

Hyppy käyttäytyminen

Riippumatta siitä, onko kyseessä saman sivun linkki vai ei, selain käyttäytyy vierittämällä sivua, kunnes kyseinen elementti on sivun yläosassa . Tai niin pitkälle kuin mahdollista, jos se ei voi vierittää niin pitkälle. Tämä on melko tärkeää tietää, koska se tarkoittaa, että tämän "ilmoitetun" käyttäytymisen hyödyntäminen on vähän hankalaa / rajoitettua.

Esimerkiksi olen kokeillut kerran erilaisia tekniikoita toimivan CSS-välilehden kopioimiseksi, mutta lopulta päätin käyttää valintaruudun hakkerointia parempaan ideaan, koska se välttää sivuhyppyongelmat. Ian Hansson CSS Science -yhtiössä tarjoaa myös joitain esimerkkejä välilehdistä. Hänen kolmas esimerkki käyttää :targetja absoluuttisesti sijoitettuja elementtejä, jotka on piilotettu sivun yläosan yläpuolelle estääkseen sivun hyppäämisen. Se on fiksu, mutta kaiken kaikkiaan täydellinen ratkaisu, koska se tarkoittaisi sivun hyppäämistä ylöspäin, jos välilehdet olisivat alaspäin sivulla.

Lisää tietoa

Artikkeli täällä CSS-temppuista: Päällä: kohde
Valitsimet, taso 4
Yksinkertainen kuvagalleria käyttäen: target (kärsii sivuhypyn asiasta, hyvä esimerkki tästä) Chris Heilmannilta
Keltaisen haalistumistekniikan esittely (vaikkakin olemassa olevalle sisällölle, ei juuri lisättävälle sisällölle) Web Designer Notebookista.
CSS-kohde, kirjaimellisesti, kirjoittanut Caleb Ogden.
CSS: kohde näytön ulkopuolisille malleille
MDN-asiakirjat