الأفضلية في تطبيق قواعد Css

مرحباً..
إذا وضعت قواعد CSS متعارضة تشير إلى نفس العنصر، فهناك عدد من القواعد التي يتبعها المتصفح لتحديد القاعدة التي سيتبعها بحسب دقة القواعد في التعيين، و عند ذلك يتم تطبيقها على العنصر.
أعتقد أن هذه المقالة لا تبدو لك مهمة، و خاصةً أن هذه المشكلة -أي تضارب القواعد- قلما تحدث، و لكنها غالباً ستحدث في الملفات الكبيرة أو عند أخذ قواعد CSS من أكثر من ملف، لذلك لا مانع من إلقاء نظرة على هذا الأمر.
إذا كانت العناصر المختارة هي نفسها تماماً، فعند ذلك سيتم تطبيق الأخيرة، مثلاً :

عند ذلك فإن العنصر P سيأخذ اللون الأزرق، لأننا كتبناه آخراً.

و لكن هذه الحالة قلما تحدث، أن تكون العناصر المختارة هي نفسها تماماً، و لكن قد تحدث هذه الحالة عندما يتم "تداخل" بين العناصر المختارة، فمثلاً :


يبدو هنا أن العنصر P الموجود داخل العنصر Div سيأخذ اللون الأزرق لأننا عرفنا لون العنصر P بشكل عام بالأزرق -في الآخر-، و لكن لا!، سيتم إسناد اللون الأحمر إلى العنصر P الموجود داخل العنصر Div، لماذا؟، لأن هذه القاعدة محددة و دقيقة أكثر من القاعدة الثانية، لذلك يتم تطبيق القواعد العامة ثم تطبيق القواعد الخاصة فوقها، أرجو أن تكون الفكرة قد وضحت.

و الآن سنحدد الحالات و نعطي لكل حالة عدد من النقاط التي تستحقها، فالحالات الأكثر نقاط هي التي تأخذ الأفضلية في التطبيق :
1- إذا حددت العنصر (مثلاً P، كما في الحالة الأولى)، عند ذلك تعتبر هذه الحالة هي الأقل دقة و تحديد لذلك تأخذ نقطة واحدة.
(مثال) إذا حددت عنصرين متداخلين (مثلاً Div P، كما في الحالة الثانية السطر الأول)، عند ذلك تعتبر هذه الحالة هي تطبيق للحالة الأولى مرتين (1+1) لذلك تأخذ نقطتين.

2- إذا حددت الطبقة (Class) (مثلاً .alternative) عند ذلك تأخذ 10 نقاط.
(مثال) إذا حددت عنصرين متداخلين و حددت الطبقة الخاصة بالثاني (مثلاً div p.alternative)، عند ذلك تعتبر هذه الحالة تطبيق للحالة الأولى مرتين، و للحالة الثانية مرة (1+1+10) لذلك تأخذ 12 نقطة.

3- إذا حددت الـ ID (مثلاً #content)، عند ذلك تأخذ مئة نقطة.
(مثال) إذا حددت عنصرين متداخلين، و حددت الـ ID الخاص بالعنصر الأول و حددت الطبقة الخاصة به أيضاً (body #content .alternative p)، عند ذلك تعتبر هذه الحالة تطبيق للحالة الأولى مرتين و للحالة الثالثة مرة، و للحالة الثانية مرة (1+100+10+1) لذلك تأخذ 112 نقطة.

لذلك إذا وضعت هذه الأمثلة الثلاث، فإن div p.alternative ستفوز على div p و يتم تطبيقها، في حين يتم تطبيق body #content .alternative p عليهما.

لذلك سنلخص النقاط كما يلي :
العنصر : نقطة واحدة.
الطبقة : 10 نقاط.
الـ ID : مئة نقطة.
ذلك بسهولة يمكنك معرفة القاعدة التي ستتطبق من حساب عدد النقاط الخاصة بها.
أرجو أن تكون قد استفدت من هذا الدرس.

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل