اولویت‌بندی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی 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 * و موارد مشابه اولویت ۰ دارد. مقادیر ارث‌بری شده اولویت ۰ دارند.


منابع آموزشی