اولویت‌بندی

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

اولویت بندی (به انگلیسی: specificity) چیست؟

اگر دو یا چند قانون CSS که به یک عنصر یکسان اشاره می‌کنند با یکدیگر تداخل داشته باشد، مرورگر از برخی قوانین تبعیت می‌کند تا مشخص کند که کدام یک بیشترین اهمیت را دارد و می‌بایست اجرا گردد.

اولویت را مانند یک امتیاز / رتبه تصور کنید که تعیین می‌کند کدام یک از اعلان ها باید روی یک عنصر اعمال شوند. انتخابگر همگانی (به انگلیسی: universal) (*) کمترین اولویت را دارد، در حالی که انتخابگرهای ID بیشترین اولویت را دارند!

نکته: اولویت رایج ترین دلیلی است که کدهای CSS به برخی عناصر اعمال نمی‌شوند، اگر چه فکر می‌کنید باید اعمال شوند.

سلسله مراتب اولویت بندی

هر انتخابگر جایگاه خود را در سلسله مراتب اولویت دارد. چهار دسته‌بندی وجود دارد که سطح اولویت یک انتخابگر را مشخص می‌کند:

استایل‌های درون خطی - استایل درون خطی مستقیماً به عنصری که باید استایل دهی شود، متصل می‌شود. مثال: <h1 style="color: #ffffff;">

ID ها - ID یک شناسه منحصر به فرد برای عناصر صفحه، مانند #navbar است.

کلاس‌ها، خاصیت‌ها و شبه کلاس‌ها - این دسته شامل کلاس ها، خاصیت‌ها و شبه کلاس‌ها مانند :hover، :focus و... می‌شود.

عناصر و شبه عناصر - این دسته شامل نام عناصر و شبه عناصر، مانند h1،div، :before و :after می‌شود.

چگونه اولویت بندی را محاسبه کنیم؟

نحوه محاسبه اولویت را به خاطر بسپارید!

از ۰ شروع کنید، به ازای خاصیت‌های مربوط به استایل ۱۰۰۰ تا اضافه کنید، برای هر ID، ۱۰۰ تا اضافه کنید، و به ازای هر خاصیت، کلاس یا شبه کلاس ۱۰ تا اضافه کنید، به ازای نام هر عنصر یا شبه عنصر ۱ اضافه کنید:

این سه قسمت کد را در نظر بگیرید:

مثال

1 A: h1
2 B: #content h1
3 C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

اولویت A، ۱ است (یک عنصر)

اولویت B، ۱۰۱ است (یک ID و یک عنصر)

اولویت C، ۱۰۰۰ است (استایل دهی داخلی)

از آنجایی که ۱ < ۱۰۱ < ۱۰۰۰، سومین تکه کد (C) بیشترین اولویت را دارد، و آن اعمال خواهد شد.

قوانین اولویت بندی

اولویت برابر: آخرین دستور در نظر گرفته می‌شود - اگر یک دستور برابر، دو بار در فایل style sheet خارجی نوشته شود، در این حالت دستور پایین تر در style sheet به عنصری که می‌بایست استایل دهی شود

نزدیک‌تر است، بنابراین روی عنصر اعمال می‌شود:

مثال

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

مشاهدهٔ نتیجه

دستور دوم همیشه اعمال می‌شود.

انتخابگرهای ID اولویت‌های بیشتری نسبت به انتخابگرهای خاصیت (به انگلیسی: attribute) دارند - نگاهی به چند خط کد زیر بیندازید:

مثال

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

مشاهدهٔ نتیجه

دستور اول بیشتر از دستور دوم اولویت دارد، و اعمال خواهد شد.

انتخابگرهای Contexual خاص تر از یک انتخابگر تکی می‌باشند - style sheet تعبیه شده به عنصری که می‌بایست استایل دهی شود نزدیک‌تر است؛ بنابراین در شرایط زیر آخرین دستور اعمال می‌شود.

مثال

1 From external CSS file:
2 #content h1 {background-color: red;}
3 
4 In HTML file:
5 <style>
6 #content h1 {
7   background-color: yellow;
8 }
9 </style>

انتخابگر کلاس، اولویت بندی بیشتری نسبت به سایر انتخابگرهای عناصر دارد - یک انتخابگر کلاس مانند .intro نسبت به h1، p، div و.. اولویت بیشتری دارد.

مثال

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

مشاهدهٔ نتیجه

انتخابگر همگانی و مقادیر ارث بری شده اولویت ۰ دارند. - *, body * و موارد مشابه اولویت ۰ دارد. مقادیر ارث‌بری شده اولویت ۰ دارند.

صفحهٔ بعد»

«صفحهٔ قبل