• 0

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

في ملف للتنسيق css مرفق مع صفحة Html، أعلم أن وظيفة importnat!  تعطي الأولوية للخاصية التي تحملها على باقي الخصائص في حالة تعارض الخصائص فيما بينها، لكن في حالة كان للوسم  خاصيتان متضادتان وكل منهما تحمل قيمة مختلفة عن الأخرى، ولكلاهما important!، أيهما ستطبق على الوسم؟ هل هناك وظيفة أخرى أعلى وأكثر قوة من important!؟ 

مثال:

div p  {color:green!important}
div p  {color:blue!important}

ما هو اللون الذي ستأخذه p؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

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

  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

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن