شرح صفوف ومحتوى الفقرة
ماذا يحدث لو كتبت قاعدة للصنف .alert في السطر الأول من الملف، ثم كتبت قاعدة عامة للفقرة p في السطر الأخير؟ سيفوز الصنف .alert رغم وجوده في الأعلى! والسبب هو أولوية التحديد (Specificity) التي تقيس مدى دقة المحدد، فالمحدد الأدق يهزم المحدد الأعم دائماً بغض النظر عن ترتيب الأسطر:
- المحدد الشامل (
*): الدرجة الأدنى بوزن صفري، وينطبق على جميع العناصر بلا تخصيص. - محدد اسم الوسم (
pأوh1): يستهدف نوع العنصر عموماً ويتفوق على المحدد الشامل. - محدد الصنف (
.intro): أكثر تخصيصاً من اسم الوسم فيتغلب علىpوh1حتى لو سَبَقَهما في الملف. - محدد المعرّف الفريد (
#main-banner): يستهدف عنصراً واحداً بعينه فيتفوق على الأصناف والوسوم معاً. - النمط السطري المباشر (
style="..."): يُكتب على الوسم مباشرةً فيتفوق على جميع محددات ملف التنسيق الخارجي والداخلي.
HTML
<style>
#hero-note { color: navy; }
.card-note { color: teal; }
p { color: crimson; }
</style>
<p id="hero-note" class="card-note">ID wins!</p>
<p class="card-note">Class beats tag!</p>
<p>Plain tag uses crimson.</p>