هل من طريقة لتعيين خاصية أكثر إلزامية من important ! على ملف التنسيق css؟

قبل أن أجيبك لنناقش هذين المثالين أولاً:

1. الحالة الأولى:

• كود Html:

<section>
  <div>
    <p>lorem <strong>ipsum</strong></p>
  </div>
</section>

• ملف التنسيق الخاص به:

div p strong {color:red!important}
div p strong {color:blue!important}

في هذه الحالة، بما أن الخاصية لنفس الوسم وهي مكررة ليس إلا في هذه الحالة، سيأخذ الوسم p اللون الأزرق، أي سيأخذ آخر قيمة للخاصية، لأنه سيعتبر أن الخاصية تم تغيير قيمتها ليس إلا.

     2 الحالة الثانية:

• كود Html:

<section>
  <div>
    <p>lorem <strong>ipsum</strong></p>
  </div>
</section>

• ملف التنسيق الخاص به:

section div p strong {color:blue!important}
div p strong {color:red!important}

في هذه الحال سيأخذ الوسم اللون الأحمر، وهذا راجع إلى درجة الدقة في التحديد للوسم، حيث ستلاحظ أن الوسم في السطر الأول من الكود الحالي أكثر تحديدا من السطر الثاني: 

section div p strong

وهذا ما يعطي للسطر الأول  الأولوية في أخذ قيمة الخاصية في السطر الأول بدلا من الثاني، رغم أنهما يبدوان متشابهان.

CSS Order Priority Tips and Tricks