CSS-ի սպեցիֆիկության կանոններ

Նախորդ օրինակում երկու ընտրողներն էլ նույնն էին և ունեին նույն առաջնահերթությունը: Սա նշանակում է, որ հաղթում էր այն հատկությունը, որը գրված էր ներքևում:

Լինում են նաև իրավիճակներ, երբ էջի մեկ տարրին համապատասխանում են մի քանի ընտրողներ: Այս դեպքում հատկությունների հակասության դեպքում կհաղթի ավելի սպեցիֆիկ, այսինքն՝ ավելի ճշգրիտ ընտրողը: Եկեք դիտարկենք սպեցիֆիկության կանոնները:

Առաջին կանոն

Դասը միշտ հաղթում է տեգի ընտրողին:

html<p class="text">text</p>

cssp {
  color: red;
}
.text {
  color: green; /* կկիրառվի այս գույնը */
}

Результат:

Երկրորդ կանոն

Նույնականացուցիչը միշտ հաղթում է դասին:

html<p id="elem" class="text">text</p>

css.text {
  color: red;
}
#elem {
  color: green; /* կկիրառվի այս գույնը */
}

Результат:

Երրորդ կանոն

Հավասար պայմաններում հաղթում է այն ընտրողը, որը ունի ավելի շատ մասեր: Օրինակ, եթե մենք ունենք երկու տեգի ընտրող, ապա կհաղթի այն մեկը, որը ունի ավելի շատ տեգեր:

html<div>
  <p>text</p>
</div>

cssp {
  color: red;
}
div p {
  color: green; /* կկիրառվի այս գույնը */
}

Результат:

Եթե երկու դասի ընտրողներ են, ապա կհաղթի այն մեկը, որում նշված է ավելի շատ դասեր (եթե այնտեղ կան տեգի ընտրողներ, ապա դրանք ազդեցություն չունեն):

html<div class="block">
  <p class="text">text</p>
</div>

css.text {
  color: red;
}
.block .text {
  color: green; /* կկիրառվի այս գույնը */
}

Результат: