CSS - حداکثر اندازه در خط (Max Inline Size)

نوشتن نظر کلیک کنید

CSS – خاصیت (Specificity)

آخرین بروزرسانی: ۶ فروردین ۱۴۰۳

مفهوم Specificity در CSS

Specificity به معنای اولویت‌بندی قوانین CSS برای اعمال به یک عنصر است. وقتی چندین قانون CSS برای یک عنصر مشخص اعمال شوند، مقدار specificity تعیین می‌کند کدام قانون برنده خواهد شد و به عنصر اعمال می‌شود.

Specificity به عنوان یک امتیاز/رتبه عمل می‌کند و تعیین می‌کند که کدام قانون CSS به عنصر نهایی اعمال شود.

مثال 1: استفاده از عنصر “p” به عنوان سلکتور

در این مثال، رنگ متن به رنگ قرمز تنظیم شده است:

<html>
<head>
  <style>
    p {color: red;}
  </style>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

مثال 2: استفاده از کلاس

با اضافه کردن کلاس، رنگ متن سبز خواهد شد، زیرا کلاس‌ها اولویت بیشتری نسبت به عناصر دارند:

<html>
<head>
  <style>
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
  <p class="test">Hello World!</p>
</body>
</html>

مثال 3: استفاده از ID

با استفاده از ID، رنگ متن آبی می‌شود، زیرا ID نسبت به کلاس‌ها اولویت بیشتری دارد:

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
  <p id="demo" class="test">Hello World!</p>
</body>
</html>

مثال 4: استفاده از استایل Inline

استایل‌های Inline همیشه اولویت بیشتری دارند، بنابراین رنگ متن صورتی خواهد شد:

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>
  <p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>

سلسله مراتب Specificity

هر سلکتور CSS دارای یک سطح در سلسله مراتب specificity است. چهار دسته اصلی برای تعیین سطح specificity وجود دارد:

استایل‌های Inline: مثال: <h1 style="color: pink;">
IDها: مثال: #navbar
کلاس‌ها، شبه‌کلاس‌ها و سلکتورهای صفات: مثال: .test, :hover, [href]
عناصر و شبه‌عناصر: مثال: h1, ::before

محاسبه Specificity

برای محاسبه specificity، از صفر شروع کنید:

برای هر ID، عدد 100 را اضافه کنید.
برای هر کلاس، شبه‌کلاس یا سلکتور صفات، عدد 10 را اضافه کنید.
برای هر عنصر یا شبه‌عنصر، عدد 1 را اضافه کنید.

نکته: استایل‌های Inline مقدار specificity معادل 1000 دارند و همیشه بالاترین اولویت را خواهند داشت.

نکته ۲: استفاده از قانون !important حتی از استایل‌های Inline هم بالاتر خواهد بود.

قوانین بیشتر Specificity

تساوی در Specificity: آخرین قانون برنده می‌شود اگر دو قانون یکسان در فایل CSS وجود داشته باشند، آخرین قانون اعمال می‌شود:

h1 {background-color: yellow;}
h1 {background-color: red;}

سلکتورهای ID نسبت به سلکتورهای صفات اولویت دارند: در این مثال، اولین قانون به دلیل اولویت بیشتر اعمال خواهد شد:

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

سلکتورهای Contextual نسبت به سلکتورهای تکی اولویت دارند: اگر یک استایل در فایل HTML تعریف شود، آن استایل نسبت به استایل‌های تعریف شده در فایل خارجی اولویت دارد:

/* از فایل خارجی: */
#content h1 {background-color: red;}

/* در فایل HTML: */
<style>
#content h1 {background-color: yellow;}
</style>

سلکتور کلاس از هر تعداد سلکتور عنصر قوی‌تر است:

.intro {background-color: yellow;}
h1 {background-color: red;}

سلکتور عمومی (*) و مقادیر ارث‌برده‌شده دارای مقدار Specificity صفر هستند: سلکتور عمومی و مقادیر ارث‌برده‌شده نادیده گرفته می‌شوند و Specificity ندارند.

CSS – خاصیت (Specificity)

مفهوم Specificity در CSS

مثال 1: استفاده از عنصر “p” به عنوان سلکتور

مثال 2: استفاده از کلاس

مثال 3: استفاده از ID

مثال 4: استفاده از استایل Inline

سلسله مراتب Specificity

محاسبه Specificity

قوانین بیشتر Specificity

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

CSS – خاصیت (Specificity)

مفهوم Specificity در CSS

مثال 1: استفاده از عنصر “p” به عنوان سلکتور

مثال 2: استفاده از کلاس

مثال 3: استفاده از ID

مثال 4: استفاده از استایل Inline

سلسله مراتب Specificity

محاسبه Specificity

قوانین بیشتر Specificity

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

JavaScript – کلمه کلیدی Let (Let)

JavaScript – متغیرها (Variables)

JavaScript – کامنت‌ها (Comments)

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید