Elsőbbségi szabályok css (specificitás)

Prioritás vagy cpetsifichnost szabályok stylesheet szükséges böngésző csak akkor, ha egy html elem, két vagy több meghatározott szabályok vonatkoznak a css az oldalon. próbál változtatni az azonos tulajdonságokkal ezen elem, például a szöveg színét. Ebben az esetben a böngésző kell döntenie, hogy mely szabályok vonatkoznak, ez meghatározza a teljes súlya a szelektor, amelyen keresztül a szabályok vannak beállítva, hogy továbbra is jár két módja van:

• Ez vonatkozik a szabály. akiknek a testsúlya szelektor tovább.
• Ha a szelektor súlyozza mindegy szabályok, a szabályok, ami alacsonyabb, mint az összes, a css kódot.

Súly szelektor css

Súly szelektor, más néven specificitás böngészők által meghatározott egy nagyon egyszerű áramkört. A tömeg minden szelektor képviseli, mint egy csoport 4 független egész számok:

Minden választó, például egy vagy .header. hozzáadott egységet egy ilyen 4 sor, annak típusától függően.

Példák prioritás számítás:

Ez a szám sorozat utolsó számjegyet a legkisebb súly, és a bal szélső számjegy - a legnagyobb. Ez azt jelenti, hogy még egy egység a második sorban a jobb, mint bármelyik legnagyobb alakja az első. azaz:

0,0,1,0 0,0,0,5 és egynél több mint 0,1,0,0 0,0,2,5

Az alábbi táblázat mutatja, hogy milyen számot hozzáadja egy-egy, a meglévő típusú szelektor

Táblázat súlyelosztás szelektorok

Az univerzális választó * - nem súlyához viszonyított többi szelektor, nem tesz hozzá semmit - 0,0,0,0

Tag szelektor (pl div), és az ál (pl után) - 0,0,0,1

Osztály szelektor (pl .box), attribútum szelektorok (mint például egy [title = "home"]), valamint a pszeudo (pl: hover) - 0,0,1,0

Az azonosítók (például #modal) - 0,1,0,0

Feltételek írásbeli közvetlenül az elem attribútum style = „” (inlaynovye) - 1,0,0,0

A pszeudo-osztály: nem önmagában nincs súlya, de a súlya a szelektor, amelyek az érvelését (pl bemenet: nem ([type = „submit”])) tekinthető normális.

Szimbólumok képviselik kapcsolatok szelektor + (szomszédos szelektor)> (közvetlen gyerek elemét), és

(Kapcsolódó szelektorok) nem veszik figyelembe, súlyuk egyenlő 0

Szabályok írva a elemcímkék nem különbözik a szokásos dugó stílusok (style.css például), böngészők nem tesznek különbséget a szabályokat a két forrás nem biztosít jogosultságokat ezek közül bármelyik.

Példák a lehetséges típusok kombinációi szelektor (súly):

Más elemek, amelyek ellenőrzik a kijelzőn

Stílusok böngésző alapértelmezett (. Felhasználói ügynök stílus mindegyiknek megvan a saját böngésző, benne csak akkor, ha az elemek nem adott semmilyen stílus) - a lehető legalacsonyabb prioritási között minden stílust.

Attribútumok címkék megjelenítéséhez elemek, mint például width = „” és a height = „” - több felhasználói ügynök stílus, de gyengébb, mint bármelyik választókat. Ők lehet ölni még a segítségével az egyetemes választó *.

Itt egy egyszerű példa a számítás a specificitása szelektor: mi span. amely két egymással szemben meghatározott szabályok vonatkoznak:

Ebben az esetben a sajátosságát az első szabály az 0,0,0,1, és a második specificitás - 0,0,1,1, mivel a második szabály ugyanazt a kalibráló meghatározni a szülő osztály .parent1.

A tömeg mind a szabályok a szelektor az 0,0,0,1, így a szabály vonatkozik színe: piros. futó az alábbi kódot.

Itt van az első szabályt alkalmazzák, annak ellenére, hogy a második a kódot css, alatti, így a súlya az első szabályok (0,0,3,1) nagyobb, mint a második tömege (0,0,1,1).

A szöveg színének eredményeként zöld lesz, mivel inlaynovy több hagyományos stílusban. Súly szokásos szabály - 0,1,0,2 tömeg inlaynovogo szabályok - 1,0,0,0

! Fontos szabályok

Ezzel szemben a választókat. Fontos nem használják az összes szabályt, és minden egyes tulajdonság, hogy annak ellenére, hogy a súlya a szelektor más rendeletek, az ingatlan már pontosan alkalmazni a elemet.

Annak ellenére, hogy a sajátosságait az első szabály hosszabb, color tulajdonság is érvényes a második szabályt, mivel nevezték ki! Fontos. és a súlya a más szabályainak szelektoroktól ez nem fontos. Ugyanakkor font-style tulajdonság továbbra is dőlt. mivel az első szabály szelektor súlyozná, és ugyanaz a tulajdonság a második szabály nem jelölt nagyon fontos (! fontos).

A helyzet a kód nem fontosak az ingatlan! Fontos. ha az! fontos tulajdonsága ennek az elemnek van hozzárendelve egyetlen. Írásban az alábbiak szerint:

megkapjuk az azonos érték színe: piros.

Minden megváltozik, amikor egy tulajdonság két vagy több szabály! Fontos. Ebben az esetben a szelektor tömeg ismét kezd figyelembe kell venni, és ha ez ugyanaz, és figyelembe veszi a helyzet a kódot.

Ebben az esetben az ingatlan vonatkozik színe: kék. a súlya szelektorjai a szabályokat.

Ismét vonatkozik ingatlan szín: kék. mert a sajátossága a fenti szabályoknak, és a szekvencia a szabályok ebben az esetben nem számít.

Ha azok a szabályok tömege egyenlő legyen:

Alkalmazza mi jön utoljára.

Ebben az esetben alkalmazza a szabályt szín: piros fontos !. mivel az ingatlan a szabályt! Fontos nagyobb súlya van, mint inlaynovye stílusok, amelyek nem rendelkeznek ilyen szabály.

Itt a munka általában inlaynovoe színe: zöld fontos !. mivel inlaynovye ingatlan szabály! Fontos, hogy a lehető legnagyobb súlyt.

Prioritás örökli stílusok

Fontos megjegyezni, hogy a súlya stílusok elemeit örökölt a szülők mindig nulla, akkor könnyen megölni hagyományos Címkeválasztó, vagy például egy div. akkor is, ha a szabály, hogy a kijelölt szülő! fontos.

Azt is fontos tudni, hogy milyen stílusok öröklődnek és felülírható az univerzális szelektor *. Annak ellenére, hogy a választó specificitása * és örökli stílusok nulla, sajátosságait * valójában mindig magasabb örökli stílusokat.

Mindkét esetben alkalmazható a span'u színe: zöld. mint bármely általában megszakítja a súlya örökölt tulajdonságokat.

Ez akkor is igaz, ha a stílusok kapnak szülő elem közvetlenül a style attribútum. és még uralkodni! fontos. súlyuk a gyermekkel kapcsolatos elemek továbbra is nulla.

Az eredmény: mindkét esetben a munka span'a ingatlan színe: zöld.

Ezek mind jellemzői speciális szabályok a css, amit tudomásul kell venni a minőségi betűszedő. Eleinte úgy tűnhet, hogy más módon, de megjegyeznie minden csinálni, de mindezen elvek meglehetősen egyszerű, és a gyakorlatban is adunk gyorsan, egy közös rendszert.

• bootstrap
• CSS