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; /* මෙම වර්ණය යොදනු ඇත */
}

Результат: