CSS választók leírása és elemzése a legalapvetőbb ezek
CSS választók - az egyik fő jellemzője a CSS nyelv. Selectors lehetővé kell alkalmazni, mint az elemek egy csoportját, és csak az egyiket.
Szelektor CSS
A szelektor kell mondani a böngésző, hogyan kell használni elemeit stílusok vannak leírva fogszabályozó.
Ebben az esetben a választó elvégzi p - paragrafus. Egy ilyen szabály lesz hozzá stílus minden pontban egy weboldalon.
Mik CSS választók?
Címke kijelölő - a legegyszerűbb. Ő volt a példa mutatja. Kell írni, hogy css, meg kell írni egy névtáblát nélkül relációjelet. Stílusok fogják alkalmazni minden olyan elem, a címkét.
táblázat<> - stílusok az összes tábla
Li<> - stílusok minden elem a listán
A<> - stílusok linkekhez
Stílus osztály - bármely elemét kötődhet a stílus osztály weblap. Még egy levél. Majd a css-fájlt olvassa el ezt az elemet írásban saját stílusokat neki. Ehhez tegye a pont és a nevét kell leírni a stílus osztály után. példák:
.körülbelül<> - a szabályok vonatkoznak minden elem, amelynek attribútuma class = „körülbelül”
.le<> - a szabályok vonatkoznak minden elem, amelynek attribútuma class = „lefelé”
.úszó<> - a szabályok vonatkoznak minden elemet, amelyek class = „float” tulajdonság
Mint látható, a fő ellátó pont. Stílus osztály képes kötődni korlátlan számú terméket. Element lehet rendelni több osztályra.
Azonosító - más típusú szelektor. Egy azonosítót, megadhatja csak az egyik eleme. Ez nem lehet két azonosítók id, és csatolni kell ezt az elemet nem lehet megállapítani máshol.
Megkérdezte ezt:
Ez is, mint egy osztály, csak az id attribútum használunk érték, amelyre minden szót használjuk.
Utalni egy elemet az azonosító segítségével css, hogy írjon id értékét, és tegye a grill előtte.
#first Font-size: 22px
>
Mi fordult egy bekezdés id = először. Stílus alkalmazzák, csak neki. A további bekezdéseiben szöveg mérete nem változik.
ál
Mintegy pszeudo-osztályok írtam egy külön cikket. így nem látom okát, hogy ismételje meg.
ötvözi szelektor
Egy másik fontos szabály, hogy tisztában legyenek. Selectors stílus osztályok felírható nem választotta el egymástól. Például:
.class1.class2 - válaszd ki azokat az elemeket, amelyek mindkét osztályból.
.class1.class3.class8 - kiválasztja az elemeket, amelyek a szokásos három-osztály stílusát.
beágyazott szelektor
Ha a szelektor választja el egymástól szóközzel, fel lehet húzni a kívánt tételt a számunkra. példák:
Táblázat td - választja ki az összes sejt, hogy feküdjön a táblázatokban
Ul li a - kiválasztja az összes kapcsolatot, hogy feküdjön a lista elemeit (az elemek listáját, viszont önmagukban listák)
.class1 p - kiválasztja az összes bekezdések attribútum class = „class1”
.class2 p span - kiválasztja az összes tag. fekvő francia osztályú class2.
Befektetés és kombinált olyan módon lehet bármilyen számú alkalommal. példák:
#header .logo span: first-letter<> - választja ki az első betű a Span logó található, amely a kupak
.class1.class2: hover<> - határozza meg a stílust, ha az egeret a tételeket, amelyek a stílust osztályban.
Gyermek szelektor
Ha meg kell állítani a stílus a szülő elemek, amelyek közvetlenül leányvállalata. szükséges regisztrálni:
Ul> li<> - kiválasztja a lista elemeit kerülnek bele közvetlenül, és nem tartoznak más címkék
P> a<> - akkor csak azokat hivatkozások bekezdésekben, amelyek meghatározzák közvetlenül őket, nem ágyazott többi címke (ami viszont fektetett bekezdésben)
például:
Ha egy ilyen nyilvántartás választó P> a. hogy a stílusok vonatkozásában a referencia a fenti példában? Nem, mert még mindig ágyazva egy másik tag, amely nem közvetlen leányvállalata.
Közeli szelektor
Az utolsó dolog, amit meg fogja vizsgálni ma. Ha regisztrálni css, mint ez:
.Class1 + .class4 <>. majd a választó kiválasztja egy elem egy attribútum class = „Class4”. és ez az elem kell állni a HTML-kód mögött közvetlenül elem class class1. Csak ezen a módon fog működni. Ismét egy példát:
Vajon a fenti választó munka (.class1 + .class4 <> )? Nem, mert az elemek nem állnak egymás mellett. Köztük van az img tag. De ha törölni, akkor működni fog.
Tehát, mi tekinthető a legalapvetőbb és legegyszerűbb választókat. Bizonyára ez a tudás lesz ahhoz, hogy megoldja a problémákat, 95% -a. A következő cikkben fogom leírni néhány konkrétabb CSS választók.
Prioritás CSS választók
Azt, hogy milyen stílusok prioritást, használja az egyszerű szabályokat:
Id az elsődleges választó. Ha az elem van stílusa class és id. és mindkét vannak rendelve az adott ingatlan különböző értékeket, akkor a stílusok vannak írva az azonosító kerül sor.
Class választó prioritás több mint Címkeválasztó (p, asztal, ul). A pseudo-osztály ugyanolyan súllyal esik latba, mint egy egyszerű osztály. p: first-line elsőbbsége .firstline. mert a második választó csak egy osztály, és az első - Címkeválasztó + ál.
Egy másik hasznos szabály - a választó pontosabban, a prioritások több stílus neki. Például a test és p csatát megnyeri a bekezdés, mivel ez több konkrét választó, mint a test (mert az egész oldal, ami nem túl specifikus). Táblázat o. viszont, pontosabban, mint p. Általánosságban elmondható, hogy vegye figyelembe az alábbi szabályokat.