Css kiválasztók
A választó kiválasztja az egyes elemeket az oldalon. Gyakran használják a margó és a párnázás értékének visszaállításához. Úgy gondolják, hogy a választó túl sok a böngészőt, ezért el kell kerülni.
A gyermek elemek kiválasztásához használhatja.
# (azonosító)
A rácsos jel kijelöl egy elemet a megadott azonosítóval.
CSS osztályválasztó. Használjon osztályokat arra, hogy egy stílusot több hasonló tételhez alkalmazzon.
X Y (hely)
CSS választó gyerekeknek. Ha egy bizonyos típusú elemeket szeretne kiválasztani egy gyermekelemekből, használja ezt a választót. Például ki kell választania az összes li elemet.
Kerülje a beágyazott szelektort, például Y Z A B.blockt.
Kiválasztó címke
Az oldal bizonyos címkéit választjuk ki.
: látogatott és: link (ál-osztályok)
Az ál-osztály: link az összes olyan link kiválasztására szolgál, amely még nem volt kattintva. Az ál-osztály: látogatás kiválasztja a már meglátogatott linkeket.
A következő elem kiválasztása. Csak az Y típusú elemet választja ki, amely közvetlenül az X elem után megy. A példában az első bekezdés szövege minden ul után zöld lesz.
Az X Y és X> Y standard különbség az, hogy a szóban forgó CSS választó csak a közvetlen gyermekeket választja ki.
Selector #container> ul csak a ul elemet választja. amelyek a közvetlen id = container konténerek. Nem választja, például, ul. amelyek az első li gyerekei.
A választó hasonló az X + Y típushoz, azonban kevésbé szigorú. Ha az ul + p-t használod, akkor csak az X után következő első elemet választhatod ki. Ebben az esetben a p ul elemeinek összes elemét kiválasztjuk.
[cím] (attribútumok)
Válassza ki a cím attribútummal rendelkező összes linket. A fennmaradó linkek változatlanok maradnak.
[href = "Foo"]
A megadott webhelyre mutató összes link kiválasztásra kerül. Az összes többi link változatlan marad.
Ha az oldal nem domainhez vezet, hanem egy domain oldalt, akkor szabályos kifejezéseket használhat.
X [HREF * = "webmaster.alexanderklimov.ru"]
X [href ^ = "http"]
X [href $ = ".JPG"]
Ha a stílust csak a fényképhez vezető linkekhez szeretnénk beállítani? Meg kell keresni a vonal végét.
A "$" kifejezést használjuk a sor végére. Ebben olyan linkeket keresünk, amelyek jpg-fájlokra vagy url-okra utalnak, amelyek végén ".jpg" áll.
X [adat - * = "foo"]
Hogyan írhatunk egy CSS-választót, amely kiemeli a különböző típusú képek linkjeit.
Egy másik megoldás az egyedi attribútumok használata. Adja hozzá saját adat-filetype attribútumát minden egyes linkhez.
Most választhatunk ilyen linkeket a választó segítségével:
) lehetővé teszi egy adott tulajdonság kiválasztását az attribútumok listájából, vesszővel elválasztva.
Ez az ál-osztály csak UI elemeket oszt ki, például egy kapcsolót vagy egy jelölőnégyzetet. És a jelöltek / kijelöltek.
A pszeudo osztályok a kiválasztott elem körüli tartalmat generálnak.
Sokan megismerkedtek ezekkel az ál-osztályokkal, amikor egyértelműen megfogalmazott hack-szal dolgoztak.
Ez a hack a következőt használja: utána egy elemet az elem után, és megakadályozza, hogy az áramlódjon.
A CSS3 specifikációnak megfelelően két oszlopot kell használni (:). Használhat azonban egy kettőspontot a kompatibilitáshoz.
Stílus az elemhez, amikor áthelyezi az egeret.
szegélyes alj: 1px tömör fekete; jobban néz ki, mint a szövegdekoráció: aláhúzás;
: nem (választó)
A negáció pszeudoosztálya nagyon hasznos. Ki kell választania az összes divot, kivéve az azonosítóval rendelkező azonosítót.
Kiválaszthatja az összes elemet, kivéve p.
:: pszeudo-elem
Pszeudo-elemeket használhatunk az elemek töredékének, például az első sornak vagy az első betűnek. Ne feledje, hogy a blokkszint elemeit kell alkalmazni, hogy azok érvénybe léphessenek.
Az ál-elemet két kettőspont határozza meg.
A bekezdésben az első betűt választjuk.
Ez a kód fogja kiválasztani az összes bekezdést, és kiválasztja az első betűket, és ezeket a stílusokat alkalmazza rájuk.
A bekezdés első sorát választjuk ki.
Hasonlóképpen köszönhetően. első sorban a bekezdés első sorának stílusát állítjuk be.
„Mert kompatibilitás a meglévő stíluslapok, a böngésző meg kell értenie az előző jelöléssel pszeudo elemek kettősponttal bevezetett CSS 1 & 2 (: first-line első betű előtt és: .. Miután). Ez a kompatibilitás nem engedélyezett az új pszeudo-kiszabott ebben a leírásban. "
: nth-child (n)
Kiválaszthatja a harmadik gyermek elemet. Felhívjuk figyelmét, hogy az n-edik gyermek elfogadja értéke, mint a paraméter azonban számlálási nem 0. Ha azt szeretnénk, hogy válassza ki a második elemet a listában, használata li: n-ed gyerek (2).
A lista minden negyedik elemét egyszerűen írhatja: li: nth-child (4n).
: nth-last-child (n)
Mi van, ha hatalmas elemek listája van, és ki kell választania a harmadik elemet a végén? Ahelyett, hogy a következőt írná: nth-child (397), használhatod a nth-last-child-t. Ez a módszer majdnem megegyezik a fentiekkel, de a számlálás a végéről származik.
: n-típusú (n)
Lehetővé teszi, hogy ne válasszon egy gyermek elemet, hanem egy bizonyos típusú elemet. Képzeld el, hogy öt rendezetlen lista szerepel az oldalon. Ha a stílust csak a harmadik olyan ul számára kívánja alkalmazni, amely nem rendelkezik egyedi azonosítóval, akkor a n-edik típusát kell használni.
: nth-last-of-type (n)
Használhatunk még a legutolsó típust is, számítva az elemeket a végén.
: első gyermek
Ez az ál-osztály kiválasztja az első gyermeket. Gyakran használják a határvonal eltávolítását a lista első és utolsó elemében.
: utolsó gyermek
Ezzel szemben: első gyermek: az utolsó gyermek kiválasztja az utolsó gyermeket.
: csak gyermek
Lehetővé teszi az egyedüli gyermekek kiválasztását. Például alkalmazza a fenti stílust erre a html-kódra:
Csak az első div választja ki, p, mert ez az egyetlen gyerek.
: csak a típus
Nagyon érdekes ál-osztály. Olyan elemekre vonatkozik, amelyek nem rendelkeznek szomszédokkal a szülőelemen belül. Például, csak egy elemet választunk a listában.
Az egyetlen megoldás az, hogy csak a-típusú.
: első típus
Kiválasztja a megadott típus első elemét.
Hogyan lehet kiemelni a (2) bekezdést?