محاسبه‌ی اولویت قانون‌ها در CSS

مرورگرهای اینترنت بر اساس فرمول ویژه‌ای اولویت قانون‌های 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 ( استفاده از بیشترین شناسه در قانون ) شما را به این هدف می‌رساند.

منبع

این نوشته در CSS, برنامه‌نویسی ارسال و برچسب شده است. افزودن پیوند یکتا به علاقه‌مندی‌ها.

یک دیدگاه برای محاسبه‌ی اولویت قانون‌ها در CSS

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>