آموزش مفهوم Specificity در CSS
اگر دو یا چند دستور CSS داشته باشیم که به یک عنصر یکسان اعمال شده باشند، سلکتوری که اولویت یا specificity بیشتری داشته باشد، برنده خواهد شد و استایل آن به عنصر HTML مذکور اعمال می شود. specificity مانند یک سلسله مراتب(hierarchy) است که مشخص می کند کدام استایل در نهایت به یک عنصر اعمال می شود. به مثال های زیر توجه کنید:
مثال شماره 1
در اینجا، ما از عنصر p بعنوان سلکتور استفاده کرده ایم و برای این عنصر p یک رنگ متن قرمز(red) را مشخص کرده ایم. نتیجه: رنگ متن ما قرمز خواهد شد:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>سلام به شما</p>
</body>
</html> حالا نگاهی به مثال 2 بیاندازید:
مثال شماره 2
در اینجا، ما یک سلکتور کلاس ( به نام "test") ایجاد کرده ایم و برای این کلاس، یک رنگ سبز(green ) تعیین کرده ایم. نتیجه: متن ما به رنگ سبز خواهد شد(با اینکه یک رنگ قرمز یا red را برای سلکتور عنصر p مشخص کرده ایم). علتش این است که سلکتور کلاس اولویت بیشتری(higher priority) دارد:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">سلام بر شما</p>
</body>
</html> اکنون به مثال 3 توجه کنید:
مثال شماره 3
در اینجا، یک سلکتور id (به نام demo) اضافه کرده ایم. نتیجه: متن ما به رنگ آبی blue درمی آید؛ زیرا سلکتور id اولویت بیشتری دارد:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">سلام بر شما</p>
</body>
</html> حالا به مثال 4 توجه کنید:
مثال شماره 4
در اینجا یک استایل درون خطی(inline) برای عنصر p اضافه کرده ایم. نتیجه: متن ما به رنگ صورتی(pink) در می آید، زیرا استایل درون خطی از بالاترین اولویت برخوردار است:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">سلام بر شما</p>
</body>
</html> سلسله مراتب specificity در CSS
| # | اولویت | مثال | توضیح |
|---|---|---|---|
| 1 | استایل درون خطی(Inline) | <h1 style="color: pink;"> |
بیشترین اولویت را دارد و مستقیماً با استفاده از خصوصیت style اعمال می شود. |
| 2 | سلکتور id | #navbar |
از دومین اولویت برخوردار است و با استفاده از یک خصوصیت id یکتا در یک عنصر شناسایی می شود. |
| 3 | کلاس ها و شبه کلاس ها(pseudo-classes) | .test, :hover |
از سومین اولویت برخوردار است و با استفاده از نام کلاس ها، هدف قرار می گیرد. |
| 4 | خصوصیت ها(Attributes) | [type="text"] |
اولویت کم؛ به خصوصیت ها اعمال می شود. |
| 5 | عناصر و شبه عناصر(pseudo-elements) | h1, ::before, ::after |
کمترین اولویت؛ به عناصر HTML و شبه عناصر اعمال می شود. |
مثال های بیشتر در مورد قواعد Specificity
اولویت برابر(Equal specificity): آخرین دستور اعمال می شود. اگر یک دستور یکسان، دو بار در یک برگه های استایل اکسترنال نوشته شده باشد، آخرین دستور برنده می شود و اعمال می شود:
سلکتورهای id از اولویت بیشتری نسبت به سلکتورهای خصوصیت(attribute) برخوردار هستند. به سه خط کد زیر توجه کنید:
مثال شماره 6
div#myDiv {background-color: green;}
#myDiv {background-color: yellow;}
div[id=myDiv] {background-color: blue;}در مثال بالا، اولین دستور از اولویت بیشتری نسبت به دو دستور دیگر برخوردار است و بنابراین به کدها اعمال می شود.
سلکتورهای متنی(Contextual selectors) نسبت به سلکتور های عنصر تکی، خاص تر هستند. برگه های استایل اضافه شده(با استفاده از تگ <style>)، به عنصری که می خواهیم استایل دهی کنیم، نزدیکتر هستند(یعنی اولویت بیشتری دارند). مانند زیر:
/*ازفایل سی اس اس اکسترنال:*/
#content h1 {background-color: red;}
/*در فایل اچ تی ام ال:*/
<style>
#content h1 {background-color: yellow;}
</style> در کد بالا، آخرین دستور اعمال می شود.
یک سلکتور کلاس، هر تعداد سلکتور عنصر را کنار می زند. مثلا یک سلکتور class مانند intro. بر سلکتورهای h1 و p و div و غیره غلبه می کند.
سلکتور جهانی(*) و مقادیر به ارث برده شده
سلکتور جهانی(*) و مقادیر به ارث برده شده(inherited values) تاثیری بر اولویت یا specificity ندارند:
- بازدید: 145
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.