CSS Selectors. típusú szelektor

, amelyek mindegyike szeretne állítani egy konkrét színt. Hogyan kell csinálni? Szabványos CSS választók nem alkalmasak címkék jelzik, hogy a paramétereket az összes blokkot egyszerre. A megoldás egyszerű. Rendeljen osztály tagjai. Például az első kapott div class = 'red', a második - class = 'kék', a harmadik - class = 'zöld'. Most már ki lehet választani a CSS táblázatok.

A szintaxis a következő: Egy pont ( „”), majd írásban a neve az osztály. Kezeli az első egység, használja az építési kapott vörös. Második - .blue és így tovább.

Fontos! Javasoljuk, hogy használjon értelmes értékek class attribútum. Úgy véljük, rossz formában átírás használata (pl krasiviy-blok), vagy véletlenszerű kombinációja a betűk / számok (ojfh834871). Ebben a kódot, akkor óhatatlanul összezavarodnak, nem is beszélve a nehézségeket, amelyekkel szembe kell néznie, akik majd részt vesznek a projektben, miután. A legjobb megoldás -, hogy bármilyen módon, például BEM.

Előnyök - viszonylag magas rugalmasság.

Hátrányok - a több elem lehet egy és ugyanazon osztály, ami azt jelenti, hogy nem lesznek egyszerre szerkeszthetők. A probléma megoldódott módszer alkalmazásával, valamint öröklődése preprocessors. Ügyeljen arra, hogy a kezét kevesebb, Sass vagy más elpárologtató, jelentősen egyszerűsíti a munkát.

ID szelektor

Körülbelül ez a verzió véleményt programozókat és a programozók nem egyértelműek. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Néhány CSS útmutatók nem javasoljuk a használatát ID, mert pontatlan alkalmazása, problémákat okozhatnak az öröklési. Azonban sok szakértő aktívan rendezni őket az egész elrendezést. Ön dönti el. # »), затем имя блока. A szintaxis a következő: a kettőskereszt ( „#”), akkor a blokk nevét. #red. Például, #red.

отличается от класса по нескольким параметрам. ID eltér az osztály több szempontból is. ID. Először is, a lap nem lehet két azonos azonosítót. Vannak rendelve egy egyedi nevet. Másodszor, az ilyen kiválasztó magasabb prioritással. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Ez azt jelenti, hogy ha meg egy egység csoportnak piros és meghatározza CSS táblázatok piros háttérszínt, majd rendeljen hozzá az azonos id kék és adja meg a kék szín, az egység kékre vált.

Előnyök - akkor az ellenőrzés az adott elem, figyelmen kívül hagyva stílusok címkék és osztályok.

ID и class. Hátrányok - könnyű eltévedni számos ID és az osztályt.

Fontos! ID вам, в общем-то, не нужны. Ha ön használ BEM módszertan (vagy annak analógjai), ID neked, általában nincs szükség. Ez a módszer használatát elrendezés egyedi osztályok, amelyek sokkal kényelmesebb.

univerzális szelektor

{}. Szintaxis: Starlets jel ( "*") és a zárójelek, azaz, {*} ...

Használt hozzárendelni bizonyos attribútumokat, ha minden elemét az oldalt. Amikor ez hasznos lehet? box-sizing: border-box. Például, ha be szeretné állítani az oldalt ingatlan doboz méretezése: border-box. div *{}. Nem csak kezelésére használt minden összetevője a dokumentumot, hanem, hogy ellenőrizzék az összes gyerek a megadott tömb például div * {}.

Előnyök - akkor az ellenőrzés a nagy számú tételek egy időben.

Hátrányok - nem elég rugalmas lehetőség. Ezen túlmenően, az ezzel a választó, bizonyos esetekben lassítja az oldalt munkát.

tulajdonságaik

Lehetővé teszik, hogy ellenőrizzék az elem egy adott tulajdonság. Például, ha van egy több input tag egy másik attribútum típusát. Egyikük - a szöveg, a második - a jelszót, a harmadik - számot. Persze, akkor meg minden osztály vagy azonosító, de ez nem mindig kényelmes. CSS választók attribútumok lehetővé teszik, hogy adja meg értékeket az egyes címkék a legnagyobb pontossággal. Például így:

bemenet [type = 'szöveg'] {}

Ez a szelektor kijelöli az összes attribútum a bemenet típusát szöveget.

Az eszköz nagyon rugalmas, és lehet használni bármelyik tag, ahol előfordulhat, hogy az attribútumokat. De ez még nem minden! A CSS specifikáció képes irányítani az elemeket még több kényelem!

Képzeljük el, hogy az Ön oldala bemenet az attribútum helykitöltő = „Adjon meg egy nevet”, és input helykitöltő = „Írja be a jelszót.” Azt is ki lehet választani a választó! Ehhez használja az alábbi szerkezetet:

bemeneti [placeholder = "nevének megadása"] {} vagy bemeneti [placeholder = "Írja be a jelszót"]

Talán rugalmasabb munkát attribútumokat. Tegyük fel, hogy van egy sor címkék hasonló jellemzőkkel rendelkező cím (például „Kaszpi” és a „Kaszpi”). Kiválasztásához egyaránt használja a következő beállításokat:

[Cím * = "Kaspiysk"]

CSS fogja választani az összes elem, amelynek címe vannak szimbólumai „Caspian”, azaz. E. és „Kaszpi” és a „Kaszpi”.

Azt is megadhatja, címkék, kezdődik egy bizonyos képességeidet:

[Cím ^ = "kívánt karakter"] {}

vagy megszüntessék:

[Cím $ = "right karakter"] {}.

Előnyök - maximális rugalmasságot. Megadhatja meglévő oldalelemek nélkül Messiás az osztályokat.

Hátrányok - használt viszonylag ritkán, csak bizonyos esetekben. Sok webes tervezők inkább a módszer, hiszen a lényeg osztály könnyebb, mint hogy gondoskodjon számos szögletes zárójelek és a jelek „egyenlő”. Ráadásul ezek a választókat nem működnek az Internet Explorer 7-es és az alábbiakban. Azonban akik most kell a régi Internet Explorer?

pseudo-class szelektor

Jelentése pszeudo-állapot eleme. Például ,: hover - mi történik a része az oldal, ha lebeg ,: látogatott - a látogatott link. Ugyancsak elemeket tartalmaz, mint: az első gyermek, és: az utolsó gyermek.

Ez a fajta választó aktívan használja a modern elrendezés, mert hála ez lehet, hogy egy oldal „élő” használata nélkül JavaScript. Például, ha szeretnénk, hogy győződjön meg arról, hogy, ha lebeg a gomb felett az osztály gmb színe megváltozott. Ehhez használjuk a következőképpen tevődik össze:

.btn: hover {

background-color: red;

}

Beauty megadható alaptulajdonságait a gombot, az átmenet ingatlanok, például 0,5 s - ebben az esetben a gomb nem pirulni azonnal, és fél másodpercen belüli.

Erények - széles körben alkalmazzák a „megújulás” oldalak. Könnyen használható.

Hátrányok - nem azok. Ez egy nagyon praktikus eszköz. Azonban tapasztalatlan webes tervezők eltévedni a rengeteg ál-osztályok. A probléma megoldódott tanulmány és gyakorlat.

pszeudo-szelektor

„Pszeudo” - ezek azok a részek, hogy az oldal nem a HTML-ben, de még így is lehet kezelni. Nem érti? Ez sokkal egyszerűbb, mint amilyennek látszik. Például, azt szeretné, hogy az első betű a húr nagy és vörös, míg a többi kis és fekete szöveget. Természetesen arra lehet következtetni, hogy a levél egy span egy bizonyos osztály, de ez hosszú és unalmas. Sokkal könnyebb kiválasztani a teljes bekezdés, és használja pszeudo :: first-letter. Ez lehetőséget ad arra, hogy ellenőrizzék a megjelenése az első levelet.

Van elég sok ál-elemekkel. Sorolja fel őket egy cikkben nem valószínű, hogy sikerül. Megtalálható a releváns információkat a kedvenc keresőprogram.

Előnyök - biztosítja a rugalmasságot, hogy testre a kinézetét az oldal.

Hátrányok - új számukra gyakran összekeverik. Sok választás az ilyen típusú munka csak bizonyos böngészőkben.

Összefoglalva

Selector - egy hatékony eszköz a dokumentum flow control. Hála neki, akkor válassza ki minden egyes elemét az oldal (vannak még csak részben). Ügyeljen, hogy megtanulják a rendelkezésre álló lehetőségeket, vagy akár írd le őket. Ez különösen akkor fontos, ha olyan komplex oldalak a modern design és rengeteg interaktív elemek.