A CSS Pseudo-osztályok végleges útmutatója
Akár kezdő vagy tapasztalt CSS fejlesztő, valószínűleg hallottál pszeudo-osztályok. Valószínűleg a legismertebb pszeudo-osztály :lebeg, ami lehetővé teszi számunkra, hogy elemezzünk egy elemet a lebegő állapotban, azaz amikor egy mutatóeszköz, például egér mutat rá.
A korábbi margókon alapuló álláspontjainkat követve: az automatikus és a CSS úszók, részletesen megvizsgáljuk a pszeudo-osztályokat. Meglátjuk milyen valójában a pszeudo-osztályok, hogyan működnek, hogyan kategorizálhatjuk őket, és hogyan különböznek a pszeudoelemektől.
Mik azok a pszeudo-osztályok?
A pszeudo-osztály egy kulcsszó, amelyet a CSS-szelektorokhoz hozzáadhatunk annak érdekében, hogy határozzon meg egy különleges állapotot a hozzá tartozó HTML elem. Pszeudo-osztályt adhatunk a CSS-szelektorhoz a vastagbél szintaxisa : mint ez: a: hover …
A CSS osztály olyan attribútum, amelyet a HTML-elemekhez adhatunk, ugyanazokat a stílusszabályokat alkalmazzuk, mint például a felső menüelemek vagy az oldalsáv-widgetek címei. Más szavakkal, a CSS osztályokat használhatjuk csoportosítsa vagy osztályozza a HTML elemeket hasonlóak egy vagy más módon.
A pszeudo-osztályok hasonlítanak hozzájuk abban az értelemben, hogy ők is olyan stíluselemek hozzáadására szolgál, amelyek azonos jellemzőkkel rendelkeznek.
De míg a valódi osztályok vannak felhasználó által meghatározott és a forráskódban látható, például A rendszeres CSS osztályok munkája az csoportosítani vagy csoportosítani. A fejlesztők tudják, hogyan kell csoportosítani elemeiket: csoportokat hozhatnak létre, mint például a "menüelemek", a "gombok", a "bélyegképek", stb. Ezek az osztályozások az elemek sajátosságain alapulnak maguk a fejlesztők. Például, ha a fejlesztő úgy dönt, hogy a A HTML-elemek azonban rendelkeznek saját közös jellemzőik állapotuk, pozíciójuk, természetük és az oldal és a felhasználó közötti kölcsönhatás alapján. Ezek a jellemzők nem általában a HTML-kódban szerepel, de tudjuk célzott pszeudo-osztályokkal a CSS-ben, például: Ezek azok a jellegzetességek, amelyeket általában a pszeudo osztályok céloznak meg. Ahhoz, hogy jobban megértsük az osztályok és a pszeudo-osztályok közötti különbséget, feltételezzük, hogy az osztályt használjuk Ezeket az utolsó gyermekelemeket a következő CSS-vel tudjuk stílusosítani: De mi történik, ha az utolsó elem megváltozik? Nos, el kell mozdítanunk Ez a gond a frissítési osztályokat a felhasználói ügynök hagyhatja, legalábbis azokban a jellemzőkben, amelyek közösek az elemek között (és hogy az utolsó elem ugyanolyan gyakori, mint amennyire lehetséges). Miután egy előre meghatározott Sokféle pszeudo-osztály létezik, ezek mindegyike lehetőséget nyújt az elemek elemzésére azoknak a jellemzőiknek megfelelően, amelyek egyébként hozzáférhetetlenek vagy nehezebbek a hozzáférésre. Íme egy lista az MDN szabványos pszeudo osztályairól. A dinamikus pszeudo-osztályokat hozzáadja és eltávolítja a HTML-elemekből dinamikusan, az államba való átmenet alapján válaszul a felhasználó interakcióira. A dinamikus pszeudo-osztályok néhány példája Állami alapú pszeudo-osztályokat adnak az elemekhez, amikor azok vannak egy adott statikus állapotban. A legismertebb példái a következők: A legnépszerűbb állami alapú pszeudo-osztálynak kell lennie A strukturális pszeudo-osztályok az elemeket osztályozzák helyzetüket a dokumentumszerkezetben. Leggyakoribb példái a Vannak más pszeudo-osztályok is, amelyeket nehéz besorolni, például: A pszeudo-osztályok egyik legnehezebb dologja valószínűleg megérteni a különbséget a Mindkettő strukturális pszeudo-osztályok és jelölés egy adott elem a szülőelemen belül (konténer), de másképp. Feltételezni n akkor 2 Nézzünk egy példát. Lássuk, hogy ez a rövid CSS két különböző esetben stílusolja a HTML-t. Az 1. esetben a második elem a De ha a szülőelem csinál van egy második bekezdés, a Példánkban a 1. bekezdés, 1. gyermek 2. bekezdés, 3. gyermek A második esetben a rendezetlen listát a harmadik helyre helyezzük, a második bekezdés pedig előtte. Ez azt jelenti, hogy mind a 1. bekezdés, 1. gyermek 2. bekezdés, 2. gyermek Ha többet szeretne olvasni a különbségekről a Amikor pszeudo-osztályokról beszélünk, fontos megérteni hogyan különböznek a pszeudoelemektől, annak érdekében, hogy ne keverjük össze őket. De míg pseudo-osztályokat használunk a HTML elemek kiválasztásához létezik a dokumentumfában csak nem külön jelöltük, a pszeudoelemek lehetővé teszik számunkra, hogy az elemeket célozzuk általában nem létezik a DOM-ban, akár egyáltalán (pl Van még egy különbség a szintaxisban. A pszeudoelemeket általában kettős kettőspontokkal azonosítják Ez zavart eredményezhet, mint a CSS2-ben, a pszeudo-elemeket egyetlen kettősponttal jelölték meg - a böngészők még mindig elfogadják a pszeudo-elemek egyetlen kettőspontjának szintaxisát. A pszeudo-osztályok és a pszeudo-elemek között is vannak különbségek ahogyan CSS-el irányíthatjuk őket. Pszeudo-elemek csak megjelenhetnek után a szelektorok szekvenciája, míg a pszeudo-osztályok a CSS szelektor-szekvenciában bárhol elhelyezhetők. Például célállhat egy listaelem utolsó listájának elemét VAGY A szelektor első sorrendje kiválasztja az utolsó gyermeket a Próbáljunk valami hasonlót csinálni a pszeudo-elemekkel. A fenti CSS kód érvényes, és megjelenik a "piros" szöveg után a Ez a kód viszont nem fog működni, mint mi nem változtathatja meg a pszeudoelem helyzetét a választó sorozaton belül. A szelektor mellett csak egy pszeudo-elem jelenhet meg, míg a pszeudo-osztályok kombinálhatók egymással ha a kombinációnak van értelme. Például, az első olvasható célú gyermekelemek megcélzására a pszeudo-osztályok kombinációját hozhatjuk létre A választó kód a Fontos tudni ezt ezek nem CSS pszeudo-osztályok amit a jQuery céloz meg. Ezeket jQuery választó bővítményeknek nevezik. A jQuery választó bővítmények lehetővé teszik Önnek célozza meg a HTML elemeket egyszerűbb kulcsszavakkal. Legtöbbjük több normál CSS szelektor kombinációja, amelyek egyetlen kulcsszóval vannak ábrázolva.Pszeudo-osztályok célja
.utolsó azonosítani az utolsó elemeket a különböző szülőtartályokban.
li.last text-transform: nagybetűs; option.last font-style: dőlt;
.utolsó osztály az előző utolsó elemtől az aktuálisig.:utolsó gyerek pseudo-class valóban nagyon hasznos. Így, mi nem kell az utolsó elemet jeleznie a HTML-kódban, de még mindig a következő CSS-sel tudjuk stílusosítani őket: li: last-child text-transform: nagybetűs; opció: utolsó gyermek font-style: dőlt;
A pszeudo-osztályok főbb típusai
1. Dinamikus pszeudo-osztályok
:lebeg, :fókusz, :link, és : látogatott, amelyek mindegyike hozzáadható a horgony címke. a: látogatott szín: # 8D20AE; .gomb: hover, .button: fókusz font-weight: bold;
2. Állami alapú pszeudo-osztályok
: ellenőrzött jelölőnégyzetekre alkalmazható):Teljes képernyő a teljes képernyős módban jelenleg megjelenített elemeket célozhatja meg:Tiltva olyan HTML elemek esetében, amelyek letiltott állapotban lehetnek, például , , és . : ellenőrzött, amely jelzi, hogy egy jelölőnégyzet be van-e jelölve, vagy sem. .jelölőnégyzet: check + label font-style: dőlt; bemenet: letiltva háttérszín: #EEEEEE;
3. Strukturális pszeudo-osztályok
:első gyerek, :utolsó gyerek, és : N-ed gyermek (n) - mindegyik felhasználható arra, hogy egy adott gyermekelemet a tartály belsejében elhelyezkedő pozíciója alapján - és :gyökér amely a DOM legmagasabb szintű szülőelemére irányul. 4. Egyéb pszeudo-osztályok
: Nem (x) amely kiválasztja azokat az elemeket, amelyek nem egyeznek az x választóval: Lang (nyelv-kód) amely kiválasztja azokat a elemeket, amelyek tartalmát egy adott nyelven használják: Dir (irányítottság) amely egy adott irányú tartalmú elemeket választ ki (balról jobbra vagy jobbra balra). p: lang (ko) háttérszín: # FFFF00; : root háttérszín: # FAEBD7;
n-ed gyermek vs nth típusú Pszeudo-osztályok
: N-ed gyermek és : N-edik-of-típusú pszeudo-osztályok.: N-edik-of-gyermek (n) egy olyan elemet céloz meg, amely a szülőelem második gyermeke, és : N-edik-of-típusú (n) célkitűzések a második a azonos típusú elem elemét (például a bekezdések) egy szülőelemen belül. / * egy bekezdés, amely a második gyermek a szülőelem * / p: nth-gyermek (2) color: # 1E90FF; // lightblue / * a második bekezdés a szülőelemen belül * / p: nth-of-type (2) font-weight: bold;
1. eset
n-ed gyerek (2) a szabály nem vonatkozik rá. Annak ellenére, hogy ez egy második gyermek nem egy bekezdés. n-edik-A-típusú (2) szabály érvényesül, mivel ez a szabály csak az elemeket, és nem érdekel más típusok elemeket (például rendezetlen listákat) a szülőelemen belül.n-edik-A-típusú (2) a szabály a második bekezdést, amely a 3. gyermek.
Rendezetlen 1. lista, 2. gyermek
2. eset
: N-ed gyerek (2) és a : N-edik-of-típusú (2) szabályokat kell alkalmazni, mivel a második bekezdés a szülő második gyermeke
Rendezetlen 1. lista, 3. gyermek
: N-ed a gyermek és : N-edik-of-típusú pszeudo-osztályok, a CSS Tricks-nek van egy nagy hozzászólása. Ha a SASS-t használja, a Family.scss segít bonyolult létrehozásában n-ed gyermek'ified elemek.Pszeudo-osztályok, Pseudo-Elements
Pszeudo-elemek, mint például ::előtt és ::után (lásd a bemutatót, hogyan kell használni őket) a felhasználók által hozzáadott, és CSS-sel célozhatók és stílusosak is, mint a pszeudo-osztályok. ::előtt és ::után) vagy csak a meglévő elemek bizonyos részeként (pl ::első levél vagy ::helykitöltő). ::, mivel a pszeudo-osztályokat egyetlen kettősponttal azonosítjuk :.1. Helyük a CSS Selector Sequence-ben
ul>: last-child.red color: # B0171F;
ul> .red: last-child color: # B0171F;
.piros), a második pedig az utolsó gyermeket választja azon elemek között, amelyek a .piros osztály belsejében ul> .red :: után display: block; tartalom: „piros”; szín: # B0171F;
az osztályba tartozó elemek .piros. ul> :: after.red display: block; tartalom: „piros”; szín: # B0171F;
2. Szelekciós sorrendben előforduló események száma
:első gyerek és :csak olvasható a következő módon: : első gyermek: csak olvasható szín: #EEEEEE;
jQuery Selector Extensions
: a szintaxis nem mindig megfelelő CSS pszeudo-osztály. Ha valaha is használta a jQuery-t, akkor valószínűleg sok választóját használta : szintaxis $ ( ': Négyzetet), $ ( ': Input) és $ ( ': A választott'). / * Az összes bemenettel kapcsolatos HTML elem betűtípusának módosítása, mint például a gomb, válassza ki a * / $ (": input") .css ("font-family", "courier new") betűt
