مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. گاهی اوقات در بخش های مختلف از کد CSS به یک عنصر HTML اشاره می شود، در اینگونه موارد مرورگرها بر اساس یکسری قوانین تعیین شده بین این کدها اولویت بندی را انجام می دهند، و از بین کدهای مختلفی که هر کدام به نحوی به یک عنصر اشاره دارند ، یکی از کدها اولویت رندر خواهد داشت. و این اولویت بندی ها به عنوان Specificity در CSS شناخته می شوند. تاکنون نیز با روش های مختلف دسترسی به عناصر HTML در CSS طی بخش های قبلی دوره آشنا شده اید، حالا زمان آن است تا با مفاهیم Specificity در CSS آشنا شده و اولویت استایل ها در CSS را بهتر بشناسید.
Specificity در CSS
در ادامه ی این بخش ما شما را با مفاهیم Specificity و اولویت استایل ها در CSS با ارائه ی چند مثال آشنا خواهیم کرد.
Specificity یا اولویت استایل ها در CSS چیست
اگر دو یا چند کد در CSS وجود دارد که به یک عنصر اشاره دارند،بر اساس اولویت استایل ها در CSS بین رندر این کدها اولویت بندی خواهد شد.
می توانید به مفهوم Specificity در CSS به عنوان یک رنج امتیاز دهی به style ها برای انتخاب اولویت بالاتر در رندر نگاه کرد.
به عنوان مثال انتخابگر (*) دارای Specificity کمی است در حالی که انتخابگر ID از Specificity بالایی برخوردار است.
نکته : درک مفاهیم Specificity به شما نشان می دهد که چرا برخی از style ها به برخی عناصر اعمال نمی شوند.
سلسله مراتب Specificity
هر کدام از انتخابگرها در Specificity سلسله مراتبی برای رندر شدن دارند.
۴ دسته بندی کلی در Specificity تعریف شده که اولویت استایل ها در CSS را تعیین می کند:
- Inline styles (استایل داخلی تگ) :
یک Inline styles داخل یک عنصر تعریف شده است.(مانند <h1 style=”color: #ffffff;”> )
- ID : یک ID در واقع یک شناسه ی یکتا برای عناصر صفحه وب است. (مانند navbar# )
- کلاس ها ، صفات و شبه کلاس ها :
این دسته شامل class. ها ، [attributes] و شبه کلاس (pseudo-class) می باشد.(مانند :hover: , focus)
- عناصر و شبه عناصر : این دسته شامل نام عناصر و شبه عناصر می باشد(مانند h1, div :before , :after)
نحوه ی محاسبه ی specificity
از ۰ شروع شده و ۱۰۰۰ برای style عناصر اضافه می شود.
۱۰۰ برای هر ID اضافه می شود.
۱۰ برای هر صفت ، کلاس و شبه کلاس اضافه می شود.
۱ برای هر نام عنصر و شبه عناصر اضافه می شود.
سه کد زیر را در نظر بگیرید:
مثال :
| A: h1 B: #content h1 C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div> |
Specificity سطر A دارای ارزش ۱ است.
Specificity سطر B دارای ارزش ۱۰۱ است (یک ID و یک نام عنصر).
Specificity سطر C دارای ارزش ۱۰۰۰ است.(استایل داخلی تگ).
سپس از سلسله مراتب ۱ < 101 < 1000 نتیجه می گیریم که کد سوم (C) از بالاترین اولویت برخوردار است.
به همین دلیل کد سوم (C) اعمال خواهد شد.
قوانین Specificity در CSS
بین دو Specificity برابر در Style خارجی همیشه Specificity که در خط پایین تر قرار دارد اعمال می شود.
مقایسه Specificity در انتخابگر ID و انتخابگرهای صفت
همیشه انتخابگر ID از Specificity بالاتری نسبت به انتخابگرهای صفت برخوردار است.
مثال : قوانین اختصاصی و انتخابگر
| div#a {background-color: green;} #a {background-color: yellow;} div[id=a] {background-color: blue;} |
مقایسه Specificity در انتخابگرها در فایل CSS و انتخابگرهای داخل تگ <style>
انتخابگرها و کدهای CSS داخل تگ <Style> به کد html نزدیکتر بوده و به همین خاطر از اولیت بیشتر نسبت به انتخابگرهای داخل فایل خارجیCSS برخوردارند.
مثال:
مثال :
| From external CSS file: #content h1 {background-color: red;} In HTML file: <style> #content h1 { background-color: yellow; } </style> |
مقایسه ی Specificity بین انتخابگر کلاس و انتخابگر نام عناصر
همیشه Specificity در انتخابگرهای کلاس از اولویت بالاتری نسبت به نام عناصر برخوردار است.
مثال : نمونه ی دوم قوانین اختصاصی در css
| .intro {background-color: yellow;} h1 {background-color: red;} |
انتخابگرهای عمومی و مقادیر ارثی دارای Specificity با ارزش ۰ بوده و کمترین اولویت را دارند.
به عنوان مثال انتخابگرهای * و * body دارای Specificity با ارزش ۰ می باشند.
کلام آخر
روش های مختلفی برای تعریف Style در HTML وجود دارد، اما در مواردی که دو یا چند روش به یک عنصر اشاره دارد، در اینجا بر اساس قوانین اولویت بندی Specificity در CSS استایل با اولویت بالاتر اعمال می شود.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
