Mik azok a css attribútumválasztók. Css attribútumválasztók. Az attribútum értékének részkarakterláncával
A CSS-ben sok választó található. Némelyikük lehetővé teszi bizonyos elemek kiválasztását anélkül, hogy stílusosztályt vagy azonosítót rendelne hozzájuk. Például css attribútumválasztók.
Hogyan válasszunk ki egy elemet a html attribútuma alapján
Az attribútumválasztók azok a kiválasztók, amelyekben egy attribútum vagy egy értékkel rendelkező attribútum szögletes zárójelben van írva. Hadd mondjak néhány példát, hogy egyértelmű legyen:
* – kijelöli az összes olyan elemet, amely bármilyen értékű href attribútummal rendelkezik.
bemenet – kijelöli az összes bemeneti elemet, amely tiltott attribútummal rendelkezik (minden letiltott mező).
bevitel – kiválasztja az összes olyan mezőt, amelynek típusa jelszó , azaz a jelszó megadására szolgáló mezőket.
img – kiválaszt egy képet, amelyen az src attribútum = "/logo.png" van beállítva.
Amint láthatja, a CSS-attribútumválasztók írása nem olyan nehéz. Legfontosabb különbségük a szögletes zárójel, amelyben vagy csak egy attribútum, vagy egy attribútum a pontos értékével van írva. De ezeknek a választóknak a funkcionalitása nem ér véget.
Speciális css attribútumválasztók
Az összes következő választó megkülönbözteti a kis- és nagybetűket.
Keresés a sor elején
div – kiválasztja az összes divet, amelynek stílusosztálya „block” karakterrel kezdődik. Így például a következő blokkok kerülnek kiválasztásra: „blokkfej”, „blokk-3”, „blokkjegyzet”. A lényeg az, hogy a jelentés elején legyen egy kulcsszó.
Keresés a sor végén
A – kiválasztja az összes hivatkozást, amelynek címe .rar végződik. Így, ha letölthet valamit a webhelyéről, akkor az archivált fájlokra mutató összes hivatkozás mellett elhelyezhet egy ikont.
Alkarakterlánc keresése mindenhol egy értékben
span – kijelöli az összes olyan span címkét, amelynek osztálynevében bárhol szerepel az „art” a névben. Így például a következő osztályokkal rendelkező spanok kerülnek kiválasztásra: party, clart, art-1.
Előtagok keresése
p – olyan stílusosztályú bekezdéseket választ ki, amelyek neve pontosan megegyezik az „első” névvel, vagy amelyik az első előtagot tartalmazza – amely az osztály nevét kezdi.
Szavak keresése a jelentésben
bemenet– kijelöli az összes olyan beviteli elemet, amelyben az azonosító attribútum értéke tartalmazza a szöveg szót. Ez abban különbözik attól, hogy mindenhol egy részkarakterláncot keresünk, hogy a szót kell belefoglalni, nem a karakterláncot.
Az utolsó két lehetőséget ritkán használják, és nem valószínű, hogy gyakran hasznosak lesznek az Ön számára, de az általános fejlesztéshez továbbra is tudhat róluk.
Mire hasznosak az attribútumválasztók?
Az ilyen választókkal számos HTML-elemet választhat ki anélkül, hogy stílusosztályokat adna nekik. Bizonyos esetekben ezzel a módszerrel lerövidítheti a kódot és leegyszerűsítheti a munkát. Például fent egy példát adtam az archívumok ikonjára. Itt újabb ötlet jelent meg. Például a webhelyén gyakran hivatkozik egy másik forrásra (mondjuk a Wikipédiára), és egy speciális ikont szeretne megjeleníteni a Wikipédiára mutató hivatkozások mellett, amelyet más hivatkozások nem tartalmazhatnak.
Ezt a következőképpen tudod megvalósítani:
A (css szabályok)
Valójában sokkal több módja van az attribútumválasztók használatának. Bizonyos mértékig leegyszerűsíthetik a munkát, ahol szükség van rá. Használja a css-t, és iratkozzon fel a blogra, hogy többet megtudjon a webfejlesztésről.
Néha el kell érni egy olyan oldalelemet, amelyhez nincs megadva osztály vagy azonosító, anélkül, hogy osztályt vagy azonosítót tudna hozzáadni a html-hez. CSS Bármely elem attribútumokkal való elérése jelenti a kiutat.
Gyakran előfordulnak ilyen helyzetek, amikor html kódot külső szkript generálja, és Ön nem módosíthatja. Ugyanakkor stílusossá kell tenni, vagy CSS-sel változtatni kell a megjelenésén.
Létezik tehát olyan, hogy kiválasztók által html attribútumok. Ezzel a segítséggel bármelyik elemet elérheti attribútumok alapján a CSS-ben. Az attribútumok ugyanazok, mint a html címkék attribútumai, például src, href, data-*, title, name, rel, alt stb.
A CSS-ben megadhat egy választót, amely teljesen vagy részben megfelel egy adott attribútum értékének.
Nézzünk néhány példát: CSS Bármely elem elérése attribútumok alapján
Például, ha van egy pixel ikonunk, amelyet a PayPal kód generál, és tovább mobil verzió el kell rejteni (mert nagyon akadályozza). Ezután egyszerűen megteheti, tiszta CSS-ben:
Vagy például el kell rejtenie az összes elemet, amelynek címe „Elküldve” kezdődik. Csináljuk:
Számos ilyen választó létezik:
- – minden olyan elem, amely rendelkezik ezzel az attribútummal
- – minden olyan elem, amelynek attribútuma pontosan = érték
- – minden olyan elem, amelynek attribútuma értéket tartalmaz (egész szónak kell lennie)
- – minden olyan elem, amelynek attribútuma értékkel kezdődik (egész szónak kell lennie)
- – minden olyan elem, amelynek attribútuma értékkel kezdődik (nem lehet egész szó
- – minden olyan elem, amelynek attribútuma értékre végződik (nem lehet teljes szó)
- – minden olyan elem, amelynek attribútuma értéket tartalmaz (lehet karakterkészlet, nem egy teljes szó)
Minden elemet egyeztet az attribútummal tulajdonság egyenlő érték. Ha érték több szóból áll, köztük szóközzel, akkor le kell zárni érték idézőjelben. Ha érték nem tartalmaz szóközt – idézőjel nem kötelező.
Példák a felhasználásra:
1. megjegyzés: Bár a szelektor segítségével osztály vagy id attribútumok alapján is megkereshetünk elemeket, helyesebb speciális szelektorokat osztály és azonosító szerint használni. Ez vonatkozik az űrlapelemek számos attribútumára is, amelyekhez külön kijelölők vannak.
Jegyzet 2: A jQuery összes verziójában az 1.2-től kezdődően nem szükséges a "@" szimbólum használata az attribútum előtt.
Akcióban
Minden olyan elem, amelynek elemleírása (title attribútum) a „Ne avatkozz – meg fog ölni” szöveggel, sárga színű lesz, piros kerettel:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ div, span ( kijelző: blokk; szélesség: 50px; magasság: 50px; lebegés: balra; kitöltés: 15px; margó: 5px; háttérszín: #eee; betűtípus -size: 20pt; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div title="Ne szállj be, meg fog ölni te"~gt~ 1 ~lt~/div~gt~ ~lt~div title="És itt biztonságos"~gt~ 2 ~lt~/div~gt~ ~lt~span title="Veszély! Tartsa távol magát"~gt~ 3 ~lt~/span~gt~ ~lt~script~gt~ $("") .css({"border":"3px solid red", "background-color": "#ffcc00"}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~ !}
Vlad Merzsevics
Sok címke hatása eltérő attól függően, hogy milyen attribútumokat használnak. Például címke gombokat, szövegmezőket és egyéb űrlapelemeket hozhat létre a type attribútum értékének megváltoztatásával. Ha azonban stílusszabályokat ad hozzá az INPUT választóhoz, akkor a stílus egyidejűleg alkalmazza a címkével létrehozott összes elemre. Az ilyen elemek stílusának rugalmas szabályozása érdekében attribútumválasztókat vezettünk be a CSS-be. Lehetővé teszik egy stílus beállítását egy adott címkeattribútum jelenléte vagy annak értéke alapján.
Nézzük meg az ilyen szelektorok néhány tipikus felhasználását.
Egyszerű attribútumválasztó
Beállítja egy elem stílusát, ha egy adott címkeattribútum meg van adva. Jelen esetben a jelentése nem fontos. Az ilyen választó használatának szintaxisa a következő.
[attribútum] (stílusszabály leírása)
Selector[attribútum] (stílusszabályok leírása)
A stílus azokra a címkékre vonatkozik, amelyeken belül a megadott attribútum hozzáadva van. Szóköz a választó neve és a szögletes zárójelek nem megengedett.
A 13.1. példa egy címke stílusának megváltoztatását mutatja be , abban az esetben, ha a title attribútumot hozzáadjuk hozzá.
13.1. példa. Az elem típusa az attribútumától függően
HTML5 CSS 2.1 IE Cr Op Sa Fx
Folytatva a híres Murphy-törvénnyel, amely kimondja: Ha baj történhet, akkor biztosan megtörténik.
, bevezethetjük megfigyelésünket: Miután egy weboldal megfelelően jelenik meg az egyik böngészőben, kiderül, hogy egy másikban nem jelenik meg megfelelően
.
A példa eredménye az ábrán látható. 13.1.
Rizs. 13.1. Egy elem stílusának megváltoztatása a title attribútum alkalmazásától függően
BAN BEN ebben a példában A tárolóban lévő szöveg színe megváltozik amikor címet adnak hozzá. Ne feledje, hogy nem szükséges megismételni a Q választó stílustulajdonságait, mivel ezek a Q választótól öröklődnek.
Attribútum értékkel
Beállítja egy elem stílusát, ha egy adott attribútumhoz adott érték van megadva. Az alkalmazás szintaxisa a következő.
[attribute="value"] (A stílusszabályok leírása)
Selector[attribute="value"] ( A stílusszabályok leírása )
Az első esetben a stílus minden címkére vonatkozik, amely tartalmazza a megadott értéket. A másodikban pedig csak bizonyos választóknak.
A 13.2. példa bemutatja, hogyan változtatható meg egy hivatkozás stílusa, ha a címke tartalmazza a target attribútumot _blank értékkel. Ebben az esetben a hivatkozás új ablakban nyílik meg és ennek megjelenítésére stílusok segítségével kis képet adunk a hivatkozás szövege elé.
Példa 13.2. A hivatkozások új ablakban való megnyitásának stílusa
HTML5 CSS 2.1 IE Cr Op Sa Fx
A példa eredménye az alábbiakban látható (13.2. ábra).
Rizs. 13.2. Elemstílus módosítása a célérték alapján
Ebben a példában egy képet adunk a hivatkozáshoz a háttér tulajdonság használatával. Feladata egy ismétlődő háttérkép létrehozása, de a no-repeat értékkel a háttér ismétlődése törölhető, ami végül egyetlen képet eredményez.
Az attribútum értéke egy adott szöveggel kezdődik
Beállítja egy elem stílusát, ha a címke attribútum értéke a megadott szöveggel kezdődik. Az alkalmazás szintaxisa a következő.
[attribute^="value"] (A stílusszabályok leírása)
Selector[attribútum^="érték"] ( A stílusszabályok leírása )
Az első esetben a stílus minden olyan elemre vonatkozik, amelynek attribútumértékei a megadott szöveggel kezdődnek. A másodikban pedig csak bizonyos választóknak. Az idézőjel használata nem kötelező, de csak akkor, ha az érték latin betűket tartalmaz, szóközök nélkül.
Tegyük fel, hogy webhelyének el kell különítenie a szokásos és a külső hivatkozások stílusát – azokat a linkeket, amelyek más webhelyekre vezetnek. Annak érdekében, hogy ne lépjen be a címkébe új osztály, használjunk attribútumválasztókat. A külső hivatkozásokat az jellemzi, hogy protokollt adnak a címhez, például a HTTP protokollt használják a hipertext dokumentumok eléréséhez. Ezért a külső hivatkozások a http:// kulcsszóval kezdődnek, és a 13.3. példában látható módon hozzáadjuk az A választóhoz.
HTML5 CSS 2.1 IE Cr Op Sa Fx
.</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samcss/fig13-3.png' width=){kind=link}
Rizs. 13.3. A külső hivatkozások stílusának módosítása
Az attribútum értéke egy adott szöveggel végződik
Beállítja egy elem stílusát, ha az attribútumérték a megadott szöveggel végződik. Az alkalmazás szintaxisa a következő.
[attribute$="value"] ( A stílusszabályok leírása )
Selector[attribute$="érték"] ( A stílusszabályok leírása )
Az első esetben a stílus minden olyan elemre vonatkozik, amelynek attribútumértéke a megadott szöveggel végződik. A másodikban pedig csak bizonyos választóknak.
Ily módon automatikusan elválaszthatja a ru tartomány webhelyeire mutató hivatkozások stílusát és a más tartományok webhelyeire mutató hivatkozások stílusát, például a com, amint az a 13.4. példában látható.
13.4. példa. Stílus különböző tartományokhoz
HTML5 CSS 2.1 IE Cr Op Sa Fx
Yandex.Com | Yandex.Ru
Ez a példa két hivatkozást tartalmaz, amelyek különböző domainekre vezetnek – com és ru. Ugyanakkor minden ilyen hivatkozáshoz saját háttérképet adunk hozzá stílusok segítségével (13.4. ábra). A stílustulajdonságok csak azokra a linkekre vonatkoznak, amelyek href attribútuma „.ru” vagy „.com” számra végződik. Felhívjuk figyelmét, hogy ha a domain névhez perjelet (http://www.yandex.ru/) vagy az oldal címét (http://www.yandex.ru/fun.html) adunk, akkor megváltoztatjuk a végződést és a stílus többé nem kerül alkalmazásra. Ebben az esetben célszerű olyan választót használni, amelyben a megadott szöveg az attribútumértékben bárhol megjelenik.
Az attribútum értéke a megadott szöveget tartalmazza
Vannak olyan lehetőségek, amikor a stílust egy bizonyos attribútummal rendelkező címkére kell alkalmazni, és bizonyos szövegek az érték részét képezik. Azt azonban nem tudni, hogy ez a szöveg pontosan hol szerepel – elején, közepén vagy végén. Ebben az esetben ezt a szintaxist kell használnia.
[attribútum*="érték"] (A stílusszabályok leírása)
Selector[attribútum*="érték"] ( A stílusszabályok leírása )
A 13.5. példa bemutatja, hogyan változtatható meg azoknak a hivatkozásoknak a stílusa, amelyek href attribútumában a „htmlbook” szó szerepel.
13.5. példa. Stílus különböző webhelyekhez
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lépésről lépésre | Grafika webhez
Ennek a példának az eredménye az ábrán látható. 13.5.
Rizs. 13.5. A „htmlbook” címet tartalmazó hivatkozások stílusának módosítása
A számos attribútumérték egyike
Egyes attribútumértékeket szóközzel lehet elválasztani, például osztályneveket. Stílus beállításához, amikor a kívánt érték szerepel a listában, használja a következő szintaxist.
[attribútum~="érték"] (A stílusszabályok leírása)
Selector[attribútum~="érték"] ( A stílusszabályok leírása )
A stílus akkor kerül alkalmazásra, ha az attribútum meghatározott értékkel rendelkezik, vagy egy szóközzel elválasztott értéklista része (13.6. példa).
13.6. példa. Stílus az osztály nevétől függően
HTML5 CSS 2.1 IE Cr Op Sa 5 Fx
Cím
Ebben a példában zöld szövegszín kerül alkalmazásra a H3 választóra, ha a réteg osztálynevének beállítása block . Vegye figyelembe, hogy hasonló eredményt kaphat, ha a ~= helyett a *= konstrukciót használja.
Kötőjel az attribútum értékében
A kötőjel (-) karakter megengedett az azonosítók és osztálynevekben, így értelmes értékeket hozhat létre az id és osztály attribútumokhoz. Az értékükben kötőjelet használó elemek stílusának megváltoztatásához használja a következő szintaxist.
[attribútum|="érték"] (A stílusszabályok leírása)
Selector[attribútum|="érték"] ( A stílusszabályok leírása )
A stílus azokra az elemekre vonatkozik, amelyek attribútuma a megadott értékkel vagy az érték töredékével kezdődik, amelyet kötőjel követ (13.7. példa).
13.7. példa. Kötőjelek az értékekben
HTML5 CSS 2.1 IE Cr Op Sa Fx
Ebben a példában az osztálynév a block-menu-therm értékre van állítva, így a stílusok a |="block" konstrukciót használják, mivel az érték ezzel a szóval kezdődik, és kötőjelek vannak az értékben.
Mindezek a módszerek kombinálhatók egymással, stílust definiálva a két vagy több attribútumot tartalmazó elemekhez. Ilyen esetekben a szögletes zárójelek egymás után következnek.
[attribute1="value1"][attribute2="value2"] (A stílusszabályok leírása)
Selector[attribute1="value1"][attribute2="value2"] (A stílusszabályok leírása)
Ellenőrizendő kérdések
1. Be kell állítani a szövegmező háttérszínét. Milyen stílus alkalmas erre a célra?
- BEMENET ( háttér: #acdacc; )
- BEMENET ( háttér: #acdacc; )
- BEMENET ( háttér: #acdacc; )
- BEMENET ( háttér: #acdacc; )
- BEMENET ( háttér: #acdacc; )
2. Melyik stílust kell használni csak a második bekezdés szövegszínének megváltoztatásához?
Első bekezdés
Második bekezdés
Harmadik bekezdés
- P (szín: piros;)
- P (szín: piros;)
- P (szín: piros;)
- P (szín: piros;)
- P (szín: piros;)
3. Melyik elemre vonatkozik a következő stílus?
( háttér: #666; )
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Válaszok
1. BEMENET ( háttér: #acdacc; )
2. P ( szín: piros; )
3.
Szinte minden elrendezéstervező tud a CSS attribútumválasztók létezéséről, és legalább egyszer találkozott a bemeneti kategóriából származó konstrukciókkal a kódjában, de csak kevesen tudják, hogy valójában 7 fajta létezik, amelyek mindegyike meglehetősen szélesre nyílik. címkék kiválasztásának lehetőségei a kódból oldalunkon.
CSS-attribútumválasztó leírása
elsődleges cél– címkék kiválasztása az oldal html kódjából egy adott attribútum, attribútumcsoport vagy azok értéke alapján.
Szintaxis– az attribútum nevét tartalmazó szögletes zárójel.
Az attribútumválasztók osztályozása és használata
Attribútum jelenléte alapján
[cím] ( szöveg- díszítés: aláhúzás; )
Lehetővé teszi az összes olyan elem kijelölését, amelyek egy adott nevű attribútummal rendelkeznek. Példánkban minden címmel aláhúzott címke lesz.
Pontos attribútumérték alapján
input[ type= "submit" ] ( háttérszín: zöld; )
Ennek az attribútumnak talán a leggyakoribb típusa. Pontos egyezést ad meg. Csak azok a bemenetek lesznek kiválasztva, amelyek típusattribútuma elküldésre van beállítva.
Részleges attribútumérték szerint
p[ osztály ~= "hasznos" ] ( szín: piros; )
Lehetővé teszi olyan elemek kiválasztását, amelyek megadott értékei a miénket is tartalmazzák. A jobb megértés kedvéért egy példával magyarázom: minden ps, amelyik hasznos az adott osztályok között, ebbe a szelektorba kerül. (A „hasznos szuperszöveg” elüt, a „hasznos” elüti, a „szuperszöveg” nem).
Az osztályválasztó lényegében ennek az attribútumválasztónak egy speciális esete.
Konkrét attribútumértékek szerint
[ lang|= "en" ] ( betűstílus: dőlt; )
Kiválasztás attribútum alapján, amelynek értéke megegyezik a választó értékével, vagy tartalmazza ezt az értéket, amelyet kötőjel követ.
A jobb megértés érdekében elmondom, hogy a példában a lang="en", lang="en-us", lang="en-au" elemek kerülnek kiválasztásra, de a lang="ru", lang= "angol" nem fog.
Az attribútum értékének kezdetével
[ alt^= "póni" ] ( margó - alsó: 20 képpont; )
Olyan attribútumokat választ ki, amelyek értéke az általunk beállított értékkel kezdődik. Magyarázatok: alt=”ponyLand”, alt=”póni tud repülni”, alt=”póni” – ki lesz választva, alt=”pónit akarok” – nem lesz kiválasztva.
Az attribútumérték végén
Általában a működési elv hasonló az előző attribútumhoz, de ezúttal az értéknek az attribútum végén kell lennie.
img[ src$= ".png" ] (szélesség: 150 képpont; )
A példa kijelöli az összes olyan képet, amely .png fájlokra hivatkozik.
Az attribútum értékének részkarakterláncával
A logikus az előző kettő után egy szelektor lenne, amely az attribútumon belüli elhelyezkedésétől függetlenül kiválasztja azokat az elemeket, amelyekben a minket érdeklő érték előfordul.
a[ href*= "webhely" ] ( betűméret: 120%; )
Minden olyan elem kiválasztásra kerül, amely tartalmazza a minket érdeklő karakterláncot..ru” már nincs jelen. 5-ből)