Muhiimadda Gaarka ah ee CSS

CSS waxay isticmaashaa hab lagu go'aamiyo qaabka loo adeegsanayo marka ay jiraan isku dhacyo. Habkan waxaa loo yaqaan 'specificity'. Fahamka 'specificity' wuxuu kaa caawinayaa inaad xakameyso qaabka boggaaga.

Sidee loo xisaabiyaa muhiimadda gaarka ah?

• Inline styles: Waxay leeyihiin muhiimad gaar ah oo aad u sareysa (1000).
• ID selectors: Waxay leeyihiin muhiimad gaar ah oo sareysa (100).
• Class selectors, attribute selectors, iyo pseudo-classes: Waxay leeyihiin muhiimad gaar ah (10).
• Type selectors (elements) iyo pseudo-elements: Waxay leeyihiin muhiimad gaar ah (1).
• Universal selector (*), combinators (+, >, ~), iyo negation pseudo-class (:not()): Ma saameeyaan muhiimadda gaarka ah.

Tusaale:

<div id="box" class="container" style="color: blue;">
  Qoraalkan waa sanduuq.
</div>

/* 1. Inline style */
/* style="color: blue;" - Muhiimadda gaarka ah: 1000 */
/* 2. ID selector /
#box { color: green; } / Muhiimadda gaarka ah: 100 */
/* 3. Class selector /
.container { color: red; } / Muhiimadda gaarka ah: 10 */
/* 4. Type selector /
div { color: black; } / Muhiimadda gaarka ah: 1 */

Sharaxaada:

Qoraalka sanduuqa wuxuu noqon doonaa buluug sababtoo ah 'inline style' ayaa leh muhiimadda gaarka ah ee ugu sareysa. Haddii aan ka saarno 'inline style', qoraalka wuxuu noqon doonaa cagaar sababtoo ah ID selector (#box) ayaa leh muhiimad ka sareysa class selector (.container) iyo type selector (div).

Muhiimadda (!important):

Waxaa loo isticmaalaa in lagu kordhiyo muhiimadda gaarka ah ee xeerka. Isticmaalka badan wuxuu adkeyn karaa maaraynta CSS.

p { color: purple !important; }

Fiiro gaar ah:

Fahamka 'specificity' wuxuu kaa caawinayaa inaad si fiican u xakameyso qaabka boggaaga. Iska ilaali isticmaalka badan ee '!important' si aad u ilaaliso code-kaaga mid nadiif ah oo la maarayn karo.