مرورگرهای اینترنت بر اساس فرمول ویژه‌ای اولویت قانون‌های CSS را تعیین می‌کنند. به این معنی که اگر دو قانون CSS شامل یک عنصر شوند، ترتیب اعمال این دو قانون به شیوه‌ی زیر مشخص می‌گردد:
بسته به گزینشگر( selector )های به کار رفته در قانون css چهار عدد a، b، c و d محاسبه می‌شوند و سپس با قرار گرفتن این چهار عدد در کنار هم اولویت‌ها تعیین می‌گردند.
عدد اول«a» هنگامی ۱ می‌شود که گزینشگر در داخل صفت style و به صورت inline تعریف شده باشد:
<div style="color: red;"></div> |
عدد دوم«b» با شمارش تعداد شناسه‌ها( id ) موجود در گزینشگر تعیین می‌شود:
#main #sub { /* b = 2 */ color: red; } |
عدد سوم«c» با شمارش صفت‌های دیگر( غیر از شناسه ) و کلاس‌های مجازی( pseudo-class ) به دست می‌آید:
div.main.sub { /* c = 2 */ color: red; } input[type=text] { /* c = 1 */ color: red; } |
عدد چهارم«d» با شمارش تعداد عنصرها و عنصرهای مجازی( pseudo-element ) محاسبه می‌شود:
div ul { /* d = 2 */ color: red; } ul li:first-line { /* d = 3 */ color: red; } |
پس از محاسبه‌ی این چهار عدد، به ترتیب اعداد a، b، c و d در کنار هم قرار می‌گیرند و هر چه این عدد بزرگتر باشد قانون مورد نظر قانون‌های پیشین را بازنویسی می‌کند.
a,b,c,d 1,0,0,0 > 0,1,0,0 > 0,0,1,0 > 0,0,0,1 |
بنابراین اگر می‌خواهید قانونی خاص بیشترین اولویت را داشته باشد، بالا بردن عدد a ( قرار دادن قالب‌بندی در صفت style - توصیه نمی‌شود ) یا عدد b ( استفاده از بیشترین شناسه در قانون ) شما را به این هدف می‌رساند.
ممنون عالی بود