الاولوية فى css

هناك أكثر من قاعدة لترتيب الأولويات في CSS وليس فقط ترتيب الأسطر في ملف CSS، فعندما يتم وضع خاصية CSS لعنصر ما أكثر من مرة -كما في السؤال- يتم ترتيب أولوية الخواص حسب أي خاصية هي الأكثر تحديدًا للعنصر، وهذا حسب موقع W3:

اقتباس

Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

وهنا مثال للتوضيح:

<style>
  div .box {
    color: green
  }

  .two {
    color: red
  }
</style>
<div>
  <div class="box">One</div>
  <div class="box two">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

المثال السابق سيظهر كل العناصر باللون الأخضر (حتى العنصر two) وذلك لأن div .box تقوم بتحديد العنصر بشكل أكثر تفصيلًا (بعبارة أخرى العنصر محدد أكثر).

أما إن أردت أن يتم تطبيق الخاصية الثانية (two.) فيمكن ذلك بأكثر من طريقة منها إستخدام id بدلًا من class بالشكل التالي:

<style>
  div .box {
    color: green
  }

  #two {
    color: red
  }
</style>
<div>
  <div class="box">One</div>
  <div class="box" id="two">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>

المثال السابق سوف يظهر العنصر two بلون أحمر وباقي العناصر يتظل خضراء كما هي:

أو يمكنك جعل العنصر محدد أكثر من بإستخدام div.two بدلًا من .two فقط، أو يمكنك إستخدام جملة !important في مثل هذه الحالات. يمكنك أن تطبق نفس الأمثلة السابقة في مشروعك وستظهر لديك نفس النتيجة.

بالتوفيق، تحياتي.

هل لون العنصر two يبدو باللون الأبيض ؟

إذا كان كذلك تحتاج لوضع تنسيق العنصر two كالتالي

.flex .two{

}

لأن في التنسيق الأول تم إستخدام .flex و  div (تم إستخدام class و عنصر ) بينما في التنسيق الثاني تم إستخدام .two  فقط (تم إستخدام class فقط ) إذاً التنسيق الأول له الأولوية وبالتالي سيتم تنفيذ التنسيق الأول أما إذا كان للتنسيقات نفس الأولوية سيتم تنفيذ التنسيق الأخير  

الكود الذي تستخدمه غير واضح بالنسبة لي ولكن لفهم لماذا لم يتم التفيذ حسب الترتيب يجب عليك التعرف على الاولوية بالنسبة للمحددات في الcss :

1.  الinline style و هو أعلى مراحل الخصوصية 

   <p style="background:blue">Hellow world</p>

2. الID 

   <style>
     #any{
       background:blue; 
     }
   </style>
   
   <p id="any">hello world</p>

3. الclasses

   <style>
     .any{
       background:blue; 
     }
   </style>
   
   <p class="any">hello world</p>

4. اسماء العناصر نفسها 

   <style>
     p{
       background:blue; 
     }
   </style>
   
   <p>hello world</p>

ولفهم الأمر أكثر دعنا نقم بتجربة وضع جميع هذه المحددات بقيم مختلفة ونرى ايها سيتم تنفيذه

<style>
    #any {
        background: purple;
    }
    
    .any {
        background: black;
    }
    
    p {
        background: blue;
    }
</style>
<p id="any" class="any" style="background-color: yellow;">hello world</p>

حسناً ستكون الخلفية صفراء لأن الinline style له خصوصية أعلى من باقي المحددات .

ولكن إن كان هنالك important فإن المحدد الذي يحتوي على الimportant هو الذي سينفذ

<style>
    #any {
        background: purple!important;
    }
    
    .any {
        background: black;
    }
    
    p {
        background: blue;
    }
</style>
<p id="any" class="any" style="background-color: yellow;">hello world</p>

وبالقياس على الحالة التي تسأل عنها فإن الtow. لن يتم تنفيذه لأن اسم العنصر الذي يسبقه "div" لديه اولوية اعلى منه.

للإضافة , ف css selectors تعمل على حسب الأولوية وتكون على الشكل التالي:

 - المرتبة الأولى  :  !important على تنسيق العنصر مثلا

.className {
  color: "red" !important
}

- المرتبة الثانية :  السمة style على العنصر مثلا

<h1 style="color:red">Hello world</h1>

- المرتبة الثالثة:  التنسيق بواسطة ID 

#messageID{
  color: "blue"
}

- المرتبة الرابعة التنسيق بواسطة ال class

.className {
  color : "orange"
}

- المرتية الخامسة التنسيق بواسطة العنصر نفسه 

h1{
  color:  "green"
}

للمزيد من التفاصيل حول أولويات التحديد في css يمكنك زيارة موقع مجتمعات W3C   هنا