30 CSS választók, szelektor típusú és a szintaxist css
Mi választó css - a leírás egy elem vagy elemek csoportja, amely azt mutatja, a böngésző elem kiválasztására irányuló kérelmet ahhoz stílusban. Nézzük az alapvető CSS választók.
CSS-választó osztály X. A különbség id és a class hogy ugyanabba az osztályba lehet több elemet az oldalon, és id mindig egyedi. Osztályba kell használni, hogy ugyanazt a stílust több elem.
-
Milyen böngészőket támogatja:
CSS-választó id. Pound jel előtt CSS-választó X kiválaszt egy elemet, amelynek id = H. címkézéssel stílusok id mindig érdemes megjegyezni, hogy egyedinek kell lennie - az egyetlen olyan id kell az oldalon. Ezért jobb, ha a választókat a osztályok, osztályok vagy ezek a nevek címkéket. Azonban a szelektor által használt azonosító tökéletesen automatizált tesztelés, mint Ügyeljünk arra, hogy közvetlen kapcsolatot a kívánt elemet, és bízzon abban, hogy ez csak egy ilyen oldalt.
-
Milyen böngészőket támogatja:
CSS-választó az összes elem. Egy csillag kiválasztja az összes elemet, hogy létezik az oldalon. Sok fejlesztő használja arra, hogy távolítsa (reset) értékek bemélyedés (árrés és a padding) minden oldal elemeit. A gyakorlatban azonban jobb nem megtenni, mert ez a CSS-választó elég böngésző betölti keresés az összes elem az oldalon.
A * is lehet használni, hogy jelölje ki az összes gyermek elemek:
Ebben a példában gyerek elemeinek osztottak (leszármazottai) elem #header. De ez mindig érdemes megjegyezni, hogy ez a szelektor elég nehéz a böngésző.
-
Milyen böngészőket támogatja:
CSS-választó. Hogyan válasszuk ki az összes elemet az azonos típusú, ha nincs id nem osztályok? Meg kell használni a CSS-választó az elem típusát. Például válassza ki a rendezett listák az oldalon, akkor használja a olt a fentiek szerint.
-
Milyen böngészőket támogatja:
CSS gyermek választó vagy CSS gyermek választó használják gyakrabban. Arra használják, ha szükséges elemek kiválasztásához egy adott típust több gyermek elemekkel. Például kiemelheti az összes hivatkozást, amelyek megtalálhatók a sejt li. Ebben az esetben használja ezt a választó. Egy lánc szelektor, mindig kérdezd meg magadtól, hogy vajon lehetséges elkülöníteni ez az elem használható még rövidebb szekvencia kiválasztó.
-
Milyen böngészőket támogatja:
Szomszédos a választó elem választja csak az elem típusa Y, ami után következő elem X. Ebben az esetben minden bekezdés után azonnal minden div elem kap egy különleges betűtípust és méretet.
-
Milyen böngészőket támogatja:
CSS gyermek választó. A különbség az Y szelektor X és X> Y, hogy tekinthető CSS választó kiválasztja csak a közvetlen leszármazott elemek (kiválasztja csak a közvetlen leszármazottai). Például:
CSS-választó #content> ul kiválasztása csak ul, amely közvetlen leszármazottja az div blokk id = „tartály”. Úgy dönt, ul, leszármazottja az első li. Ez a módszer nagyon előnyös CSS fordulatszám választó.
-
Milyen böngészőket támogatja:
Selector ápolás (sablingovyh) kevésbé szigorúak, mint az elemek X + Y Úgy dönt, nem csak az első, hanem az összes többi elem p, elérése ol.
-
Milyen böngészőket támogatja:
9) X: látogatott, és X: link
-
Milyen böngészőket támogatja:
10) X [cím]
CSS-választó attribútummal. Ebben a példában csak azokat a kapcsolatokat, amelyek az attribútum neve.
-
Milyen böngészőket támogatja:
11) X [href = "foo"]
-
Milyen böngészőket támogatja:
12) X [href * = "stijit"]
-
Milyen böngészőket támogatja:
13) X [href ^ = "http"]
-
Milyen böngészőket támogatja:
14) X [href $ = "Jpg"]
Ez használ egy reguláris kifejezés, és a $ jel jelöli a sor végére. Ebben a példában keresünk minden a linkeket, hogy lásd a képeket .jpg kiterjesztésű.
-
Milyen böngészőket támogatja:
15) X [adatok - * = "foo"]
Itt használjuk a CSS-választó egyéni attribútumokat. Add saját adatfeldolgozási fájltípus attribútumot minden link:
Most, hogy a CSS-választó a fenti, akkor válassza ki az összes hivatkozást, ami a képek bármely meghosszabbítását.
-
Milyen böngészőket támogatja:
Segítségével ezt az eljárást, akkor válassza ki az elemeket a kívánt kombinációt képviselnek:
-
Milyen böngészőket támogatja:
17) X: ellenőrzött
Ez a pszeudo-osztály választja csak olyan elemeket, mint egy kapcsoló, vagy rádiógomb, és csak akkor, amikor már a megjelölt állam.
-
Milyen böngészőket támogatja:
18) X: után
Pseudo: before és: after nagyon hasznos - tartalom létrehozása előtt és után a kiválasztott elem.
Itt a segítségével ál-osztály: miután követően a blokk az osztály .clearfix létre egy üres sort, majd megtisztítjuk. Ezt a módszert, ha nem tudja használni a túlfolyó tulajdonság: rejtettek.
-
Milyen böngészőket támogatja:
19) X: lebeg
-
Milyen böngészőket támogatja:
20) X: nem (választó)
Az ál-nem (tagadás) akkor hasznos, például, akkor ki kell választania az összes div, kivéve azt, hogy mely id = „content”.
Ezzel ugyanazt az elvet, akkor válassza ki az összes elemet kivéve p:
-
Milyen böngészőket támogatja:
21) X :: pseudoElement
Pszeudo lehet használni stílusokat alkalmazni töredékek elemek - például az első sorban a bekezdés vagy az első betű a szó. Ez csak a blokk szintű elemeket.
Kiválasztása az első betű a bekezdés:
A választás az első sor bekezdést:
-
Milyen böngészőket támogatja:
22) X: az első gyermek
Az ál-első gyermek választja csak az első gyermek a szülő. Gyakran használják, hogy távolítsa el a határ az első listaelemet. Ez egy másik ál óta CSS 1.
-
Milyen böngészőket támogatja:
23) X: az utolsó gyermek
Az ál-last-gyermek választja ki az utolsó gyermek a szülő elem. Úgy tűnt, csak a CSS 3.
-
Milyen böngészőket támogatja:
24.) X: csak-gyermek
Csak-gyermek pseudo-osztály lehetővé teszi, hogy válassza ki a megfelelő terméket, hogy az egyetlen leszármazottja a szüleik.
-
Milyen böngészőket támogatja:
25) X: n-ed gyermek (n)
Kiválasztja a gyermek a megadott szám paramétert. Választó nth-gyermek vesz egy egész szám, mint a paraméter, azonban számítva c 1, azaz a Ha azt szeretnénk, hogy válassza ki a második elemet a listában, akkor li: n-ed gyerek (2). Minden ál segítségével n-ed gyerek meg csak a CSS 3.
-
Milyen böngészőket támogatja:
26) X: n-edik-last-gyermek (n)
Ha van egy nagy lista elemeket a ul és válassza ki a harmadik elem a végén? Ahelyett, hogy az írás li: n-ed gyermek (109). Használhatja a kiválasztó utolsó leszármazottai az n-ed utolsó gyermek. Ez a módszer ugyanaz, mint az előző, de végétől számítva.
-
Milyen böngészőket támogatja:
27) X: n-edik-A-típusú (n)
Ha az oldalon négy rendezetlen lista, és szeretné alkalmazni a stílust csak a harmadik közülük, egy egyedi azonosítót, akkor használja edik-of-típusú.
-
Milyen böngészőket támogatja:
28) X: n-edik-last-a-típusú (n)
Pszeudo-edik-last-a-típusú (n) kiválasztására n-edik eleme egy adott típusú végétől.
-
Milyen böngészőket támogatja:
29) X: csak a-a-típusú
Pszeudo-csak-a-típusú kiválasztja elemek, amelyek nem szomszédok belül a szülő elem. Például, akkor válassza ki az összes ul, amelyek csak egyetlen li.
-
Milyen böngészőket támogatja:
30) X: az első-of-típusú
Az ál-első-of-típusú kiválasztja az első eleme a meghatározott típusú.
-
Milyen böngészőket támogatja: