من در دوره آموزش CSS یک جلسه اختصاصی برای این موضوع قرار دادم که میتونید این مطلب را از لینک زیر مطالعه کنید
اولویت استایل ها و قوانین specificity در CSS
ولی اگر بخواهم باز هم بصورت خلاصه توضیح بدهم باید بگویم:
وقتی چندین استایل برای یک المان تعریف میشود، CSS از چندین قانون برای تعیین اینکه کدام استایل باید اعمال شود، استفاده میکند:
- اولویت انتخابگر (Selector Specificity): CSS بر اساس نوع انتخابگرها اولویتبندی میشود. انتخابگرهای ID بیشترین اولویت را دارند، پس از آن کلاسها، شبهکلاسها و انتخابگرهای ویژگی، و در نهایت انتخابگرهای نوع و شبهعناصر. هرچه انتخابگر خاصتر باشد، اولویت بیشتری دارد.
- انتخابگر نوع (Type Selector):
p
- انتخابگر کلاس (Class Selector):
.class
- انتخابگر ID (ID Selector):
#id
- استایلهای درون خطی (Inline Styles):
style="..."
(بیشترین اولویت را دارند)
- انتخابگر نوع (Type Selector):
- ترتیب نوشتن (Source Order): اگر دو استایل دارای اولویت برابر باشند، آخرین استایلی که در کد نوشته شده است، اعمال میشود. CSS از بالا به پایین خوانده میشود و در صورت تساوی، استایل آخرین نوشته شده، موثر است.
- استفاده از
!important
: این اعلان اولویت بسیار بالاتری نسبت به سایر قوانین دارد و میتواند هر قانون دیگری را نادیده بگیرد. اگر چندین قانون!important
برای یک خاصیت وجود داشته باشد، قوانین اولویت انتخابگر و ترتیب نوشتن دوباره اعمال میشوند.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
color: red; /* نوع انتخابگر (پایینترین اولویت) */
}
.class {
color: blue; /* انتخابگر کلاس (اولویت متوسط) */
}
#id {
color: green; /* انتخابگر ID (بالاترین اولویت) */
}
p {
color: yellow !important; /* استفاده از !important (اولویت بسیار بالا) */
}
</style>
<title>CSS Specificity</title>
</head>
<body>
<p id="id" class="class">This is a paragraph.</p>
</body>
</html>
در این مثال، رنگ متن پاراگراف به زرد تغییر میکند زیرا استفاده از !important
بر تمامی قوانین دیگر اولویت دارد.