التفضيل CSS

ما هو الخصوصية؟

إذا كان هناك قواعد CSS متعارضة تتجه نحو نفس العنصر، فإن المتصفح سيتبع بعض المبادئ لتحديد أي منها أكثر تفصيلاً، وبالتالي الفوز.

بالنظر إلى الخصوصية (الخصوصية) كنقاط/درجات، يمكنك تحديد أي تصريحات نمطية تطبق على العنصر النهائي.

المحددون العامون (* ) يمتلكون خصوصية منخفضة، بينما المحددون بـ ID يمتلكون خصوصية عالية!

ملاحظة:هذا التميز هو السبب الشائع في أن قواعد CSS لا تنطبق على بعض العناصر، رغم أنك قد تعتقد أنها يجب أن تنطبق.

هرم التحديد

لديك موقف في هرم التحديد الخاص بالاختيار. تشمل الأنواع التالية مستويات تحديد الاختيار:

النمط الداخلي - النمط الداخلي (inline) يتم إضافته مباشرة إلى العنصر الذي يتم تطبيق النمط عليه. مثال：<h1 style="color: #ffffff;">.

الـ ID - هو معرف فريد للعنصر في الصفحة، مثل #navbar.

الفئات والخصائص والوهم - هذه الفئة تشمل .classes و [attributes] والوهم، مثل :hover و :focus وما إلى ذلك.

العناصر والوهم - هذا الفئة تشمل الأسماء العناصر والوهم، مثل h1، div، :before و :after.

كيف يمكن حساب التحديد؟

تذكر طريقة حساب التحديد!

من البداية، أضف 1000 إلى style، أضف 100 لكل ID، أضف 10 لكل خاصية أو فئة أو وهم، وأضف 1 لكل اسم عنصر أو وهم.

فكر في هذه الثلاثة أجزاء من الكود:

مثال

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • تحديد A هو 1 (عنصر)
  • تحديد B هو 101 (استدعاء ID واحد وعنصر)
  • تحديد C هو 1000 (نمط داخلي)

بما أن 1 < 101 < 1000، لذا القاعدة الثالثة (C) لديها تحديد أعلى، لذا ستتم تطبيقها.

قاعدة التحديد 1:

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

مثال

h1 {background-color: yellow;}
h1 {background-color: red;}

جرب بنفسك

القاعدة التالية دائمًا تنطبق.

قاعدة التحديد 2:

محدد ID أكثر تحديدًا من محدد الخاصية - انظر إلى الثلاثة سطور التالية:

مثال

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

جرب بنفسك

القاعدة الأولى أكثر تحديدًا من القاعدتين الآخرتين، لذا ستتم تطبيقها.

قاعدة التحديد 3:

المحدد المكتسب أكثر تحديدًا من محدد العنصر الفردي - النمط المدمج أقرب إلى العنصر الذي يتم تطبيق النمط عليه. لذا في الحالات التالية:

مثال

من ملف CSS الخارجي:

#content h1 {background-color: red;}

في ملف HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

سيتم تطبيق القاعدة التالية.

قاعدة الخاصية 4:

تتفوق محددات الفئة على أي عدد من محددات العناصر - محددات الفئة (مثل .intro تتفوق على h1،p،div وما إلى ذلك):

مثال

.intro {background-color: yellow;}
h1 {background-color: red;}

جرب بنفسك

إضافة إلى ذلك،محددات عامة وأيضًا القيم الموروثة تحتوي على 0 - خاصية *،body * وغيرها من الحالات التي تحتوي على 0 من الخاصية. خاصية القيمة الموروثة أيضًا هي 0.