گاهی دو قانون یک ویژگی از یک عنصر رو تغییر می‌دن. مرورگر هر دو قانون رو می‌خونه، اما برای نمایش نهایی باید یک مقدار انتخاب کنه. به روند تعیین مقدار نهایی «آبشار» می‌گیم. فعلاً دو قانون با انتخابگر کاملاً یکسان داریم؛ پس وزن انتخابگرها مساویه و قانونی که پایین‌تر نوشته شده برنده می‌شه. این موضوع برای هر ویژگی جداگانه بررسی می‌شه، نه برای کل مجموعه دستورها.
مثلاً اگه قانون اول رنگ و اندازه بده و قانون دوم فقط رنگ، اندازه قانون اول باقی می‌مونه. مثال حل‌شده همین رفتار رو برای یک برچسب نشون می‌ده. خطای رایج اینه که فکر کنیم قانون دوم، قانون اول رو کامل پاک می‌کنه. این اتفاق نمی‌افته؛ فقط مقدار متعارض جایگزین می‌شه. توی سؤال اصلی هر دو انتخابگر p هستن و هیچ کلاس، شناسه یا سبک درون‌خطی نداریم. قبل از انتخاب جواب، مسیر رنگ و اندازه رو جدا دنبال کن و به ترتیب ظاهری قانون‌ها توجه کن.
✍️ مثال حل‌شده:
<span>خبر</span>
<style>span { color: green; font-size: 18px; } span { color: purple; }</style>
حالا نوبت توئه: در کد این سؤال دو قانون p به ترتیب آمده‌اند: اول color:red و font-size:20px، بعد color:blue. رنگ و اندازه نهایی پاراگراف «آبشار» را انتخاب کن. تنها همین دو قانون روی این ویژگی‌ها اثر دارند؛ اندازه با قانون دوم حذف نمی‌شود.
فعالیت شما
در کد این سؤال دو قانون p به ترتیب آمده‌اند: اول color:red و font-size:20px، بعد color:blue. رنگ و اندازه نهایی پاراگراف «آبشار» را انتخاب کن. تنها همین دو قانون روی این ویژگی‌ها اثر دارند؛ اندازه با قانون دوم حذف نمی‌شود.