Képesség szelektor css, css-trükkök orosz
Képesség szelektor CSS
A CSS-ben lehetőség van hivatkozni elemeit html-dokumentum értékét a attribútumokat. Természetesen, ha már tudni az azonosítót és osztályok. Vessünk egy pillantást az alábbi html:
Ez az elem három attribútum: id, osztály és rel. Lásd, hogy elemet CSS, akkor akár annak azonosítója (# első cím), vagy a nevében egy osztály (.magical). Azonban, tudtad, hogy akkor is elérheti a rel attribútum? Ezt hívják attribútum szelektor:
Sok lehetőség van a használatukra. Lássuk részletesebben a különböző lehetőségeket, és próbálja, hogy dolgozzon ki forgatókönyvet attribútumok segítségével a valós életben.
[Rel = külső]
Képesség pontosan megegyezik a megadott érték
A fenti példában, h2 elem attribútum egyenlő „barát”. A választó hogy írtunk utalva rá, mint egy attribútum érték pontosan megegyezik a „barátja”. Ez pontos. Nézzünk egy másik példát:
Egy reális példa - stylization blogroll (blogroll). Tegyük fel, hogy van egy lista a linkeket a testvér oldalak:
És szeretne beállítani minden link stílusban. A hagyományos megközelítés, hogy minden link mutat egy osztály, de ez a megközelítés megköveteli extra jelölést. Egy másik módja - az, hogy egy ál-edik gyermek. Ez a megközelítés azonban igényel egy bizonyos sorrendben elemekkel. Ezt a problémát ideálisan használható az attribútum szelektor, mert a kapcsolatok már egyedülálló.
Biztos vagyok benne, hogy a leggyakrabban az ilyen típusú választó használják elemeinek bemenet (szöveg, rádió, stb.) Mindezek az elemek nagyon különböznek egymástól, és írni valami ilyesmit bemenet
Ez az egyetlen módja annak, hogy stilizálhatja az elemek a bemeneti anélkül, hogy további jelölést, és mindenféle trükköket.
[Rel * = külső]
Attribútum tartalmazza az előre meghatározott érték.
Most indul sokkal érdekesebb dolgokat. Az egyenlőségjel a választó attribútum előzheti meg egy másik karakter, amely megváltoztatja a kinevezését annak használatát. Például, „=” azt jelenti, „egy előre meghatározott értékre lehet bárhol az értéke az említett attribútum.” Tekintsük a következő példát:
Akkor jelölje mindezen elemek a következők:
[Rel ^ = külső]
Az attribútum kezdődik egy előre meghatározott értéket
Az élet lehet például: mondjuk meg kell emelni a linket az oldal felhasználóbarát akkor különbözik a többi referencia színt. Nem számít, hol vannak a linkek a honlapon, vagy bármely más. Mindezek linkek kiemelni a következőket:
[Rel $ = külső]
Képesség véget ér egy előre meghatározott értéket
Ha tudod, hogy a választás a tetején az attribútum értékét, akkor miért nem lehet fordítani lehetőségeket?
Őszintén szólva, nem tudtam megtalálni a valódi példa a használatára az ilyen típusú választó. De azt hiszem, hogy létezik. Tegyük fel, hogy meg kell emelni a linkeket, hogy a végén nem volt szignifikáns karakterek:
= Külső]
Az attribútum a listán, szóközzel elválasztva
Mint azt már tudja, akkor meg több stílus osztályok egyik eleme. És ha így, akkor az osztály nevét hozzáférni a CSS elemet. Abban az esetben attribútum szelektor, ez nem olyan egyszerű. Ha a rel attribútum rendelve több értéket (szóközzel elválasztva), akkor meg kell használni "
Azt gondolhatnánk, hogy miért nem használjuk ebben az esetben „* =”. Valóban, ez az opció használata rugalmasabb, de lehet, hogy túl rugalmas. Megtekintett választó megköveteli az értéket szóközzel elválasztva, és a „=” - nincs. Így ha a két elem (egy rel = home barát-link. És a második a rel = home barátja link), akkor kell használni a választó az esetben a szóköz, hogy csak a második elemet.
[Rel | = külső]
Az attribútum a listán, egymástól kötőjellel
Elválasztott listája kötőjeles nagyon hasonlít a listát a tér elválasztott fentebb leírtak szerint. De megint azt a saját jellemzői, mielőtt a gombot „=”.
[Cím = egy] [rel ^ = külső]
Betartása több attribútum
Fontos, hogy a mintavételi elemek képesek, hogy több attribútum szelektor.
böngésző támogatása
Minden fenti példában működik minden modern böngészők: Safari, Chrome, Firefox, Opera és IE7 felett.