جلسه دوم : بررسی تاثیر specificity
Specificity در CSS یعنی چگونه مرورگراهمیت، وابستگی و ارجحیت المان های CSS را تعیین می کند.
در اینجا ابتدا Selectorهای Css را مرور می کنیم:
1-Type selectors
2- Pseudo element
3-class selector
4-َattribute selector
5-pseudo classes
6-ID selector
7-inline style
Selectors specificity
دومین مورد از specificity در مورد Selectorها صحبت می کند. به عنوان مثال یک Selector که دو تا کلاس دارد نسبت به Selectorای که یک کلاس دارد از اولویت بالاتری برخوردار است. اگر در یک declaration پس زمینه را نارنجی کنید اما تغییر مورد نظر اعمال نشود به این علت است که قانونی با اولویت بالاتر وجود دارد که آن را نقض می کند.
در ادامه بررسی می کنیم که چرا هنگام تغییر پس زمینه که در دنیای CSS اتفاق بسیار ساده ای می باشد این اتفاق می افتد .
قسمت آخر style sheet خود را مطابق کد زیر تغییر دهید
#main-nav
a { color: white; background-color: #13a4a4;
padding: 5px; border-radius: 2px;
text-decoration: none;
}
.featured {
background-color: orange;
}کدی که نوشته اید کار نمیکند؟ همه پیوندها را درست نوشته اید؟ پس چرا اعمال نمی شود؟
جواب مشخص است.Selector اول اولویت بالاتری نسبت به دومی دارد چرا که اولی از یکID و یک Tag تشکیل شده است در حالیکه دومی فقط یک نام کلاس دارد.Selectorها نسبت به هم اولویت های متفاوتی دارند برای مثال ID اولویت بالاتری نسبت به کلاس دارد.در حقیقت یک ID اولیت بالاتری نسبت به چند تا Selector از هر نوعی دارد.به همین ترتیب یک Selector کلاس اولویت بالاتری نسبت به Tag دارد.
پس قوانین این بخش به شکل زیر می باشد:
1-اگر انتخابگر ID دارد بالاترین اولویت است.
2- اگر نتیجه یکسان باشد انتخابگری با تعداد کلاس بیشتر برنده می شود.
3-اگر این مورد هم یکسان باشدSelector با بیشترین تعداد نام Tag برنده می شود.
در قطعه کد پایین ترتیب اعمال انتخابگرها را بررسی می کنیم
html body header h1 {
color: blue;
}
body header.page-header h1 {
color: orange;
}
.page-header .title {
color: green;
}
#page-title {
color: red;
}
در مثال بالا با الویت ترین ، مورد چهار می باشد که یک ID دارد پس رنگ قرمز اعمال خواهد شد.مورد بعدی گزینه 3 می باشد که دو تا کلاس دارد . اگر گزینه سه چهار نبود گزینه سه اعمال می شد.گزینه سه هم اولویت بالاتری نسبت به دو دارد.(دو کلاس اولویت بالاتری نسبت به یک کلاس دارد.)گزینه آخر هم یک می باشد چراکه فقط Tag دارد.
توجه!
Pseudo classها و attribute های آن اولویت یکسانی با کلاس دارند.پس تاثیری روی اولویت بندی ندارند.هم چنینSelectorهای کلی * و > و + و … نیز تاثیری روی اولویت بندی ندارند.
اگر شماDeclaration را به CSS خود اضافه کردید و تاثیر آن را مشاهده نکردید معمولا به این دلیل است که یک قانون با الویت بالاتر آن را نقض می کند.بسیاری از اوقات توسعه دهندگان selectorها را با استفاده از ID می نویسند بدون اینکه بدانند این ویژگی اولویت بالاتری را می دهد و در آینده به سختی می توان آن را کنار زد.برای حذف ID باید از یک Id دیگری استفاده کنید.
یک روش معمول برای مشخص کردن اولویت ها استفاده استفاده از یک شناسه ای است که از اعداد و ویرگول تشکیل شده است.برای مثال 2،2،1 که از یکID و دو کلاس و دوTag تشکیل شده است
در جدول زیر می توانید نحوه شناسه نوشتن را در مورد مثال قبلی را مشاهده کنید.
اکنون مسئله مقایسه اعداد شناسه پیش می آید که کدامیک انتخاب می شود .ویژگی 1،0،0 نسبت به 0،2،2 و حتی 0،10،0 اولویت بالاتری دارد(هرچند که نوشتن ده کلاس با هم توصیه نمیشود) چراکه عدد اول اولویت بالاتری دارد.
گاهی اوقات افراد از یک علامت چهار تایی استفاده می کنند که از 0 و 1 تشکیل یافته است .که از این طریق از اجرای کدهایشان اطمینان حاصل کنند. در این مورد یک inline styleدارای اولویت 1،0،0،0 می باشد.این مورد می تواند تمامی موارد اعمال شده توسط سایر selectorها را Override کند.حتی Selecrtorهای دارای ID .
در مقاله بعدی در موردSpecificity consideration صحبت خواهیم کرد.
دیدگاهتان را بنویسید