Lopullinen opas CSS Pseudo-luokkiin
Olitpa aloittelija tai kokenut CSS-kehittäjä, olet todennäköisesti kuullut näennäisluokkia. Tunnetuin pseudo-luokka on luultavasti : hover, jonka avulla voimme suunnitella elementin, kun se on hover-tilassa, ts. kun osoitetaan siihen osoitinlaite, kuten hiiri.
Aiempien marginaalien viestien käsitteen mukaisesti: auto ja CSS Floats, tarkastelemme tarkemmin pseudo-luokkia tässä virassa. Nähdään mitä pseudo-luokat todella ovat, miten ne toimivat, miten voimme luokitella ne ja miten ne eroavat pseudoelementeistä.
Mitä ovat pseudoklassit?
Pseudo-luokka on avainsana, jota voimme lisätä CSS-valikoimiin määritellä erityinen tila HTML-elementti. Voimme lisätä pseudo-luokan CSS-valitsimeen käyttämällä paksusuolen syntaksi : kuten tämä: a: hover …
CSS-luokka on attribuutti, jota voimme lisätä HTML-elementteihin, joita haluamme soveltaa samoihin tyylisääntöihin, kuten päävalikkokohtiin tai sivupalkkien widgetien nimikkeisiin. Toisin sanoen voimme käyttää CSS-luokkia ryhmittele tai luokittele HTML-elementit jotka ovat samankaltaisia tai samankaltaisia.
Pseudo-luokat ovat samankaltaisia siinä mielessä, että ne ovat myös käytetään lisäämään tyylisääntöjä elementteihin, joilla on sama ominaisuus.
Mutta kun todelliset luokat ovat käyttäjän määrittelemä ja voidaan havaita lähdekoodissa, esimerkiksi säännöllisten CSS-luokkien työ on luokitella tai ryhmitellä elementtejä. Kehittäjät tietävät, miten niiden elementit on ryhmiteltävä: ne voivat muodostaa luokkia, kuten "valikkokohtia", "painikkeita", "pikkukuvia" jne. Ryhmään ja myöhemmin tyyliin samankaltaisia elementtejä. Nämä luokitukset perustuvat elementtien ominaisuuksiin itse kehittäjät. Jos esimerkiksi kehittäjä päättää käyttää a HTML-elementeillä on kuitenkin omia yhteisiä ominaisuuksiaan perustuu niiden tilaan, sijaintiin, luonteeseen ja vuorovaikutukseen sivun ja käyttäjän kanssa. Nämä ovat ominaisuuksia ei tyypillisesti merkitty HTML-koodiin, mutta voimme kohdistaa heidät pseudo-luokkiin esimerkiksi CSS: ssä: Nämä ovat sellaisia ominaisuuksia, joita pseudo-luokat yleensä kohdistavat. Jos haluat ymmärtää luokkien ja pseudo-luokkien välisen eron paremmin, oletetaan, että käytämme luokkaa Voimme suunnitella nämä viimeiset lasten elementit seuraavalla CSS: llä: Mutta mitä tapahtuu, kun viimeinen elementti muuttuu? No, meidän on siirrettävä Tämä vaivaa päivitysluokat voidaan jättää käyttäjäagentille, ainakin sellaisten ominaisuuksien osalta, jotka ovat yleisiä elementtien välillä (ja viimeinen elementti on yhtä yleinen kuin se voi saada). ottaa ennalta määritelty Pseudo-luokkia on monenlaisia, ja ne tarjoavat meille tapoja kohdistaa elementtejä niiden ominaisuuksien perusteella, jotka ovat muuten saavutettavissa tai hankalia käyttää. Tässä on luettelo tavallisista pseudo-luokista MDN: ssä. Dynaamiset pseudo-luokat lisätään HTML-elementteihin ja poistetaan niistä dynaamisesti, perustuvat tilaan, johon ne siirtyvät vastauksena käyttäjän vuorovaikutuksiin. Joitakin esimerkkejä dynaamisista pseudo-luokista ovat Valtio-pohjaiset pseudoklassit lisätään elementteihin, kun ne ovat tietyssä staattisessa tilassa. Joitakin sen tunnetuimpia esimerkkejä ovat: Suosituin valtio-pohjainen pseudo-luokka on oltava Rakenteelliset pseudo-luokat luokittelevat elementtejä niiden asemasta asiakirjan rakenteessa. Sen yleisimmät esimerkit ovat On myös erilaisia pseudo-luokkia, joita on vaikea luokitella, kuten: Yksi pseudo-luokkien vaikeimmista asioista on luultavasti ymmärtää ero Molemmat ovat rakenteellisia pseudo-luokkia ja merkki tietty elementti vanhemman elementin sisällä (kontti), mutta eri tavalla. olettaa n on sitten 2 Katsotaanpa esimerkkiä. Katsotaanpa, miten tämä lyhyt CSS muotoilee HTML: n kahdessa eri tapauksessa. Tapauksessa 1 toinen elementti a: n sisällä Mutta jos vanhempi elementti tekee on toinen kohta, Esimerkissämme 1 kohta, lapsi 1 2 kohta, lapsi 3 Toisessa tapauksessa siirrämme järjestämättömän luettelon kolmanteen paikkaan ja toinen kappale tulee sen eteen. Tämä tarkoittaa sitä, että sekä 1 kohta, lapsi 1 2 kohta, lapsi 2 Jos haluat lukea lisää eroista Kun puhumme pseudo-luokista, on myös tärkeää ymmärtää miten ne eroavat pseudoelementeistä, jotta ne eivät sekoittuisi. Mutta kun käytämme pseudo-luokkia HTML-elementtien valitsemiseksi olemassa asiakirjan puussa vain ei ole merkitty erikseen, pseudoelementit mahdollistavat elementtien kohdentamisen ei yleensä ole olemassa DOM: ssa, joko lainkaan (esim On myös a ero syntaksissa. Pseudoelementit tunnistetaan yleensä kaksoispisteillä Tämä voi johtaa sekaannukseen, kuten CSS2: ssa, pseudoelementit on merkitty myös yhdellä kaksoispisteellä - selaimet hyväksyvät edelleen kaksoispiste-syntaksin pseudoelementeille. Pseudo-luokkien ja pseudoelementtien välillä on myös eroja miten voimme kohdistaa heidät CSS: llä. Pseudoelementit näkyvät vain jälkeen selektiivien sekvenssi, kun taas pseudo-luokat voidaan sijoittaa mihin tahansa CSS-valitsinjärjestykseen. Voit esimerkiksi kohdistaa listan elementin viimeisen luettelon kohteen TAI Valitsimen ensimmäinen sekvenssi valitsee viimeisen lapsen Yritetään tehdä jotain samanlaista pseudoelementtien kanssa. Yllä oleva CSS-koodi on voimassa ja teksti "punainen" tulee näkyviin jälkeen Tämä koodi ei kuitenkaan toimi, kuten me ei voi muuttaa pseudoelementin sijaintia valitsimen sekvenssin sisällä. Lisäksi vain yksi pseudoelementti voi näkyä selektorin vieressä, kun taas pseudo-luokat voidaan yhdistää toisiinsa jos yhdistelmä on järkevää. Esimerkiksi ensimmäisten lapsielementtien kohdentamiseksi, jotka ovat myös vain lukuisia, voimme luoda pseudo-luokkien yhdistelmän Valintakoodi a: lla On tärkeää tietää se nämä ovat ei CSS-pseudoklassit jQuery on suunnattu. Niitä kutsutaan jQuery-valitsimen laajennuksiksi. jQuery-valitsimen laajennukset antavat sinulle mahdollisuuden kohdista HTML-elementtejä yksinkertaisemmilla avainsanoilla. Useimmat niistä ovat yhdistelmiä useista tavallisista CSS-valinnoista, jotka on esitetty yhdellä avainsanalla.Pseudo-luokkien tarkoitus
.kestää tunnistaa viimeiset elementit eri peruskontteissa.
li.last text-transform: isot kirjaimet; option.last font-style: kursivoitu;
.kestää luokkaa aiemmasta viimeisestä elementistä nykyiseen.:viimeinen lapsi näennäisluokka on todella hyödyllinen. Näin me ei tarvitse ilmoittaa viimeistä elementtiä HTML-koodissa, mutta voimme silti muotoilla niitä seuraavalla CSS: llä: li: last-child text-transform: isot kirjaimet; vaihtoehto: viimeinen lapsi font-style: kursivoitu;
Pseudo-luokkien tärkeimmät tyypit
1. Dynaamiset pseudoklassit
: hover, : focus, :linkki, ja : vieraili, kaikki voidaan lisätä ankkuritunniste. a: vieraili väri: # 8D20AE; .painike: hover, .button: focus font-weight: bold;
2. Valtion perustuvat pseudoklassit
: tarkistettu joita voidaan hakea valintaruutuihin ():koko näyttö kohdistetaan mihin tahansa elementtiin, jota näytetään parhaillaan koko näytön tilassa:liikuntarajoitteinen HTML-elementteille, jotka voivat olla pois käytöstä tilassa, kuten , , ja . : tarkistettu, joka merkitsee, onko valintaruutu tarkistettu vai ei. .valintaruutu: valittu + etiketti font-style: kursivoitu; input: vammainen taustaväri: #EEEEEE;
3. Rakennepseudoklassit
:ensimmäinen lapsi, :viimeinen lapsi, ja : Nnen-lapsi (n) - kaikkia voidaan käyttää kohdistamaan tietty lapsielementti säiliön sisällä sen sijainnin perusteella - ja : root joka kohdistuu DOM: n korkeimpaan vanhempaan elementtiin. 4. Sekalaiset Pseudo-luokat
: Ei (x) joka valitsee elementit, jotka eivät vastaa valitsinta x: Lang (kieli-koodi) joka valitsee elementit, joiden sisältö on tietyllä kielellä: Dir (Suunnanvaihtopainikkeet) joka valitsee elementit, joiden sisältö on tietyn suuntainen (vasemmalta oikealle tai oikealle vasemmalle). p: lang (ko) taustaväri: # FFFF00; : root taustaväri: # FAEBD7;
nnen lapsen vs nth tyyppiä Näennäisluokkia
: Nnen-lapsi ja : Nnen-of-tyyppinen näennäisluokkia.: Nnen-of-lapsi (n) kohdistuu elementtiin, joka on sen vanhemman elementin toinen lapsi, ja : Nnen-of-tyypin (n) tavoitteet toinen keskuudessa sama tyyppi elementin (kuten kappaleet) vanhemman elementin sisällä. / * kappale, joka on myös toinen lapsi vanhemman elementin sisällä * / p: n-lapsi (2) väri: # 1E90FF; // lightblue / * toinen kappale vanhemman elementin sisällä * / p: nth-of-type (2) font-weight: bold;
Tapaus 1
n: nnen lapsi (2) sääntö ei koske sitä. Vaikka se on toinen lapsi, se on ei kappale. nnen-of-tyyppi (2) sääntöä sovelletaan, koska tämä sääntö etsii vain ja ei välitä muista tyypit elementtien (kuten järjestämättömien luetteloiden) sisällön.nnen-of-tyyppi (2) sääntö muotoilee toisen kohdan, joka on lapsi 3.
Järjestämättömä lista 1, lapsi 2
Tapaus 2
: Nnen-lapsi (2) ja : Nnen-of-tyyppi (2) sääntöjä sovelletaan, koska toinen kohta on myös sen vanhemman toinen lapsi
Järjestämättömä lista 1, lapsi 3
: Nnen-of-lapsi ja : Nnen-of-tyyppinen Pseudo-luokat, CSS Tricksillä on suuri viesti. Jos käytät SASS: ia, Family.scss voi auttaa sinua luomaan monimutkaisia nnen lapsen'ified-elementit.Pseudoklassit vs Pseudo-elementit
Pseudo-elementtejä, kuten ::ennen ja ::jälkeen (katso tämä opetus siitä, miten niitä käytetään) ovat myös lisänneet käyttäjäagentit, ja ne voidaan kohdistaa ja muotoilla CSS: llä samoin, aivan kuten pseudo-luokat. ::ennen ja ::jälkeen) tai vain tietyinä osina olemassa olevista elementeistä (esim ::ensimmäinen kirjain tai ::paikanpitäjä). ::, pseudo-luokat tunnistetaan yhdellä kaksoispisteellä :.1. Niiden paikka CSS-valitsimen sekvenssissä
ul>: last-child.red väri: # B0171F;
ul> .red: last-child väri: # B0171F;
.punainen) ja toinen valitsee viimeisen lapsen elementtien välillä, joilla on .punainen luokassa ul> .red :: jälkeen näyttö: lohko; sisältö: 'punainen'; väri: # B0171F;
luokkaa .punainen. ul> :: after.red näyttö: lohko; sisältö: 'punainen'; väri: # B0171F;
2. Sellaisten tapahtumien lukumäärä, jotka ovat valintakerroksessa
:ensimmäinen lapsi ja :Lue ainoastaan seuraavalla tavalla: : ensimmäinen lapsi: vain luku väri: #EEEEEE;
jQuery Selector Extensions
: syntaksi ei aina ole oikea CSS-pseudo-luokka. Jos olet koskaan käyttänyt jQueryä, olet ehkä käyttänyt monia sen valintoja : syntaksia $ ( ': Valintaruutu'), $ ( ': Input) ja $ ( ': Valitaan'). / * Muuta kaikkien tuloon liittyvien HTML-elementtien fonttia, kuten painiketta, valitse ja syötä * / $ (": input") .css ("font-family", "courier new")
