اذهب إلى المحتوى
  • 0

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

K@m@l

السؤال

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

مثال:

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...