Sokféleképpen választhatja ki az elemeket a CSS-ben. A legalapvetőbb választás a címke neve, például p ( ). Szinte bármi, ami konkrétabb, mint a címkeválasztó, attribútumokat használ - classés IDmindkettő kiválasztja ezeket az attribútumokat a HTML elemeken. De class, és IDnem csak tulajdonítja a fejlesztők kiválasztáshoz. Valamennyi elem attribútumát használhatjuk kiválasztóként.
Az attribútumválasztásnak speciális szintaxisa van. Íme egy példa:
a(href="https://css-tricks.com") ( color: #E18728; )Ez egy pontos egyezés választó, amely csak hrefa „https://css-tricks.com” pontos attribútumértékű linkeket választja ki .
A hét különböző típus
Az attribútumválasztók alapértelmezés szerint megkülönböztetik a kis- és nagybetűket (lásd a kis- és nagybetűk közötti egyezést), és zárójelbe vannak írva ().
Hét különböző típusú egyezés található meg az attribútumválasztóval, és a szintaxis mindegyiknél más. A bonyolultabb attribútumválasztók mindegyike a pontos egyezés választó szintaxisára épül - mindegyik az attribútum nevével kezdődik, és egy egyenlőségjelrel zárul, amelyet az attribútumérték (ek) követ, általában idézőjelben. Az attribútum neve és az egyenlőségjel között az különbözteti meg a választókat.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Az érték tartalmazza: az attribútum értéke tartalmaz egy kifejezést egyetlen értékként, egy értéket az értéklistában vagy egy másik érték részeként. A választó használatához tegyen egy csillagot (*) az egyenlőségjel elé. Például olyan img(alt*="art")képeket fog kiválasztani , amelyek alt szövege az „absztrakt művészet” és az „új sportot kezdő sportoló”, mert a „művészet” értéke a „kezdő” szóban van.
Az érték szóközzel elválasztott listában található: az érték vagy az egyetlen attribútumérték, vagy egy egész érték egy szóközzel elválasztott értékhalmazban. A „tartalmaz” választóval ellentétben ez a választó nem fogja keresni az értéket szótöredékként. A választó használatához tildét (~) adjon meg az egyenlőségjel előtt. Például olyan img(alt~="art")képeket fog kiválasztani , amelyek alt szövege „absztrakt művészet” és „művészeti show”, de nem „új sportot kezdő sportoló” (amelyet a „tartalmaz” választó választana).
Az érték a következővel kezdődik: az attribútum értéke a kiválasztott kifejezéssel kezdődik. Ennek a választónak a használatához adjon meg egy karátot (^) az egyenlőségjel előtt. Ne felejtsd el, az esetérzékenység számít. Például az img (alt = „art”) az „art show” és a „művészi minta” alt szövegű képeket választja ki, az „Arthur Miller” alt szövegű képeket azonban nem, mert az „Arthur” nagybetűvel kezdődik .
Az érték a kötőjelekkel elválasztott listán található először: Ez a választó nagyon hasonlít a „kezdődik” választóra. Itt a választó megegyezik egy olyan értékkel, amely vagy az egyetlen érték, vagy az első a kötőjelekkel elválasztott értéklistában. Ennek a választónak a használatához adjon meg pipa karaktert (|) az egyenlőségjel előtt. Például az „1900–2000” értékű li(data-years|="1900")listaelemeket választja data-years, data-yearsaz „1800–1900” értékű elemeket azonban nem .
Az érték a következővel végződik: az attribútum értéke a kiválasztott kifejezéssel végződik. A választó használatához adjon meg egy dollárjelet ($) az egyenlőségjel előtt. Például a(href$="pdf")kijelöl minden olyan linket, amely a .pdf végződésű.
Megjegyzés az idézetekről: Bizonyos körülmények között idézőjelek nélkül is megkerülheti az értéket, de az idézőjelek nélküli kiválasztás szabályai nem konzisztensek a böngészők között. Az idézetek mindig működnek, így ha ragaszkodik ezek használatához, biztos lehet benne, hogy a választója működni fog.
Lásd a CSS-Tricks tollattribútum-választóit (@ css-tricks) a CodePen-en.
Szórakoztató tény: az értékeket karakterláncként kezeljük, így nem kell különösebb karaktereket eltüntetni, hogy azok illeszkedjenek egymáshoz, akárcsak akkor, ha szokatlan karaktereket használna egy osztály vagy azonosító választóban.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Kis- és nagybetűk közötti egyezés
A kis- és nagybetűkkel nem rendelkező tulajdonságválasztók a CSS Munkacsoport 4. szintű kiválasztói részei. Mint fent említettük, az attribútumérték-karakterláncok alapértelmezés szerint megkülönböztetik a kis- és nagybetűket, de iközvetlenül a záró zárójel előtti hozzáadással nagybetű-érzéketlenné tehetők :
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )A kis- és nagybetűk közötti egyezés valóban hasznos lehet a kiszámíthatatlan, ember által írt szöveget tartalmazó attribútumok célzásához. Tegyük fel például, hogy beszédbuborékot szerkesztett egy csevegőalkalmazásban, és minden olyan üzenetet szeretett volna hozzáadni minden üzenethez, amelynek valamilyen formában a „szia” szövege volt. Ezt csak CSS-sel teheti meg, a kis- és nagybetűk figyelmen kívül hagyva az összes lehetséges variációt el tudja érni:
Tekintse meg a CSS-Tricks (@ css-tricks) tollbetét-érzéketlen CSS attribútum-egyeztetését a CodePen-en.
Kombinálva őket
Kombinálhatja az attribútumválasztót más választókkal, például címkével, osztályral vagy azonosítóval.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Vagy akár több attribútumválasztót is kombinálhat. Ez a példa olyan képeket választ ki, amelyek alt szöveggel tartalmazzák a „személy” szót az egyetlen értéket vagy egy szóközzel elválasztott lista értékét , és egy olyan srcértéket, amely tartalmazza a „lorem” értéket:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Lásd a CSS-Tricks (@ css-tricks) tollal kombinált attribútumainak és csak az attribútumoknak a kiválasztását a CodePen-en.
Attribútumválasztók a JavaScript-ben és a jQuery-ben
Az attribútumválasztókat ugyanúgy lehet használni a jQuery-ben, mint bármely más CSS-választót. A JavaScript-ben attribútumválasztókat használhat a document.querySelector()és gombbal document.querySelectorAll().
Lásd a JS és a jQuery tollattribútum-választóit a CSS-Tricks-től (@ css-tricks) a CodePen-en.
Összefüggő
- osztály
- ID
Több információ
- A sovány az attribútumválasztókon
- Attribútumválasztók az MDN-nél
- Attribútumválasztók a W3C CSS specifikációban
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Bármi | Bármi | Bármi | Bármi | 7+ | Bármi | Bármi |