Bevezetés a CSS szelektorok típusaiba
A CSS szelektorok típusai kiválasztják azt a tartalmat, amelyet stílusolni akarunk. Segít az elemek kiválasztásában osztályuk, azonosítóik, típusaik stb. Alapján. A CSS választó a CSS Szabálykészlet összetevője.
A CSS szelektorok típusai
5féle CSS szelektor választhat számunkra. Megvizsgáljuk a következő fontos CSS választókat:
- CSS univerzális választó.
- CSS elemválasztó.
- CSS azonosító választó.
- CSS osztályválasztó.
- CSS attribútumválasztó.
1. CSS univerzális választó
Egy HTML oldalon a tartalom a HTML címkéktől függ. Egy címkepár meghatározza az adott weboldal elemét. A CSS univerzális szelektor kiválasztja az összes elemet a weboldalon.
Példa:
* (
color: blue;
font-size: 21px;
)
A göndör zárójelekkel körülvett két kódsor befolyásolja a HTML oldal összes elemét. A göndör tartó elején egy csillag segítségével egy univerzális választót deklarálunk. Az Universal Selector a többi választóval együtt is használható.
2. CSS elemválasztó
A CSS elemválasztót típusválasztó néven is ismert. Az elemválasztó a CSS-ben megpróbálja egyeztetni az azonos nevű HTML elemeket. Ezért a
- megegyezik az összes
A
B
C
A
B
C
A
B
C- 1
- 2
- 3
- CSS3 Cheatsheet
- CSS interjúkérdések
- SASS vs SCSS
- SASS interjúkérdések
- Példák a HTML-re megrendelt listára
- elemek, azaz az összes rendezetlen lista az adott HTML oldalon.
Nézzünk meg egy példát az elemválasztóra.
ul (
border: solid 1px #ccc;
)
Ennek jobb megértése érdekében nézzünk meg egy példa HTML-kódot a fent írt CSS-kód alkalmazásához.
A
B
C
A
B
C
A
B
C
A
B
C
A
B
C
Bemutató szöveg
Ebben a példában elsősorban három elemet találunk, nevezetesen a
- elem, a címke és egy másik
- elem. Mivel CSS-kódunk vonatkozik a
- címke kifejezetten, a határváltások csak a miénk történnek
- címkék, és nem a címkék. Ezek a változások általában nem vonatkoznak a
- címkéket is, de bizonyos esetekben a stílusok vonatkozhatnak a belső elemekre.
3. CSS azonosító választó
A CSS ID választó segít a fejlesztőnek a fejlesztő által létrehozott azonosító illesztésével stílusához. Az ID-választót a hash (#) jel segítségével kell használni, mielőtt a fejlesztő bejelentette az azonosító nevét. Az ID-választó minden olyan HTML elemhez illeszkedik, amelynek ID-attribútuma megegyezik az értékkel, mint a választóé, kivonat-jel nélkül.
Íme egy példa:
#box (
width: 90px;
margin: 10px;
)
Ez a CSS-kód felhasználható az 'box' azonosítójú elem illesztésére, mint a következő mondatban.
Itt a címke csak egy példa. Bármely HTML-címke számára megírhatjuk az ID attribútumot. Az ID-választó megegyezik az elem ID-attribútumával és keresi a stílusát. Példánkban a stílus akkor alkalmazható, ha bármely elem tartalmazza a „box” ID attribútumot.
A használt azonosító értéke feltételezhetően egyedi. Ha ugyanazt az azonosítót használják két vagy több elemnél, akkor a kód technikailag érvénytelen, de az elem stílusa továbbra is érvényes lesz, így általában ugyanazon azonosítóval rendelkezik.
Meglehetősen merev, ha minden HTML oldalhoz minden alkalommal külön azonosítót kell használni. A merevség problémáival szemben a CSS-ben szereplő azonosító-választóknak szembe kell nézniük a specifikusság kérdésével is.
4. CSS osztályválasztó
A CSS osztályválasztó az összes választókészülék közül a leghasznosabb. Ezt egy pont felhasználásával deklarálják, amelyet az osztály neve követ. Ezt az osztálynevet a kódoló határozza meg, ahogyan az az ID választóval történik. Az osztályválasztó minden elemnél olyan pontot keres, amelynek attribútum értéke ugyanazzal a névvel rendelkezik, mint az osztály neve, pont nélkül.
Példa:
.square (
margin: 20px;
width: 20px;
)
Ez a CSS-kód felhasználható az osztály négyzetének megfelelő elemhez, mint a következő mondatban.
Ez a stílus vonatkozik az összes többi HTML elemre is, amelyeknek az osztály attribútumértéke „négyzet”. Az azonos osztály attribútumértékkel rendelkező elem segít a stílusok újrafelhasználásában, és elkerüli a szükségtelen ismétléseket. Ezenkívül az Osztályválasztó azért előnyös, mert lehetővé teszi számunkra, hogy több osztályt hozzáadjunk egy adott elemhez. Az attribútumhoz egynél több osztályt is hozzáadhatunk, ha minden osztályt szóközzel elválasztunk.
Példa:
Itt négyzet, félkövér és alakú három osztálytípus.
5. CSS attribútumválasztó
A CSS Attribútumválasztó stílusa tartalom a szögletes zárójelben szereplő attribútum és attribútumérték szerint. A nyitó szögletes zárójel előtt nem lehetnek szóközök.
input(type="text") (
background-color: #fff;
width: 100px;
)
Ez a CSS-kód illeszkedik a következő HTML elemhez.
Hasonlóképpen, ha a 'type' attribútum értéke megváltozik, az Attribútum választó nem felelne meg. Például a választó nem felel meg az attribútumnak, ha a 'type' értéke 'text' -ről 'beadásra' változik. Ha az attribútumválasztót csak az attribútummal deklaráljuk, és nincs attribútumérték, akkor az összes HTML elemmel megegyezik a „type” attribútummal, függetlenül attól, hogy az érték „szöveg” vagy „benyújtás”.
Példa:
input(type) (
background-color: #fff;
width: 100px;
)
Használhatunk olyan attribútumválasztókat is, amelyeknél a szögletes zárójelben nincs megadva egy értéket. Ez segít bennünket, hogy csak az attribútumot célozzuk meg, az elemtől függetlenül. Példánkban a „type” attribútum alapján célozza meg, tekintet nélkül az „input” elemre. A CSS választók segítenek bennünket a kód egyszerűsítésében, és lehetővé teszik, hogy ugyanazt a CSS-kódot felhasználjuk és újra felhasználjuk különféle HTML elemekhez. Segítenek nekünk weboldalunk bizonyos szegmenseinek és részeinek kialakításában. Lehetőséget biztosítanak számunkra, hogy hasonló elemeket egyenletesen formáljunk a weboldalunkon. A CSS szelektorok tehát a CSS tanulási görbéjének fontos részét képezik.
Ajánlott cikkek
Ez egy útmutató a CSS-kiválasztók típusaihoz. Itt példával tárgyaljuk a CSS-választók különféle típusait. A további javasolt cikkeken keresztül további információkat is megtudhat -