ترتیب قانون‌ها همیشه تعیین‌کننده نیست. انتخابگر شناسه یا ID از انتخابگر کلاس وزن بیشتری داره؛ پس اگه هردو یک عنصر رو بگیرن، برای ویژگی متعارض قانون شناسه برنده می‌شه. توی HTML شناسه با id نوشته می‌شه و توی CSS قبلش # میاد. هر شناسه باید توی سند یکتا باشه، اما یک کلاس می‌تونه بارها تکرار بشه. بهتره برای ظاهرهای قابل استفاده دوباره از کلاس کمک بگیریم.
توی مثال، رنگ نارنجی شناسه با وجود قرارگرفتن کلاس در خط بعدی باقی می‌مونه. تمرین یک قانون قدیمی داره که ظاهر جدید رو خراب کرده. علت رو از روی انتخابگر پیدا کن و همون قانون متعارض رو اصلاح یا حذف کن. خطای رایج اضافه‌کردن !important به هر باگ ظاهریه؛ این کار فهمیدن رابطه قانون‌ها رو سخت‌تر می‌کنه. اینجا هیچ نیازی بهش نداریم. بررسی رو ویژگی‌به‌ویژگی انجام بده: ممکنه رنگ از یک قانون و اندازه از قانون دیگه بیاد.
✍️ مثال حل‌شده:
<p id="notice" class="muted">اطلاعیه</p>
<style>#notice { color: orange; } .muted { color: gray; }</style>
حالا نوبت توئه: پیام #status با کلاس .success باید سبز، ۱۸ پیکسل و وزن 700 باشد. قانون قدیمی #status رنگ قرمز داده؛ تداخل را با اصلاح یا حذف همان قانون حل کن. id و class و متن پیام را نگه دار و از !important استفاده نکن.
فعالیت شما
پیام #status با کلاس .success باید سبز، ۱۸ پیکسل و وزن 700 باشد. قانون قدیمی #status رنگ قرمز داده؛ تداخل را با اصلاح یا حذف همان قانون حل کن. id و class و متن پیام را نگه دار و از !important استفاده نکن.