محاسبه Specificity در CSS

وزن (specificity) یک یا چند سلکتور CSS را به فرمت [a, b, c, d] محاسبه کنید و آن‌ها را با نوار بصری مقایسه کنید.

#header .nav a:hover

[0, 1, 2, 1]

inline: 0ID: 1کلاس/اتریبیوت/pseudo-class: 2عنصر/pseudo-element: 1

.card > p

[0, 0, 1, 1]

inline: 0ID: 0کلاس/اتریبیوت/pseudo-class: 1عنصر/pseudo-element: 1

button.primary[disabled]

[0, 0, 2, 1]

inline: 0ID: 0کلاس/اتریبیوت/pseudo-class: 2عنصر/pseudo-element: 1

فرمت [a, b, c, d]: a = استایل inline (همیشه صفر است چون این ابزار روی متن سلکتور کار می‌کند)، b = تعداد ID، c = تعداد کلاس/اتریبیوت/pseudo-class، d = تعداد عنصر/pseudo-element. مقایسه‌ی واقعی specificity رقم‌به‌رقم از چپ به راست انجام می‌شود، نه با جمع‌کردن اعداد؛ نوار بصری فقط یک شاخص تقریبی است. توابع pseudo تودرتو (مثل :not(:not(...))) به‌طور کامل پشتیبانی نمی‌شوند.

ابزار محاسبه Specificity وزن سلکتورهای CSS را حساب می‌کند تا بفهمید کدام قانون غالب است. راز تداخل استایل‌ها را حل کنید.

یک یا چند سلکتور CSS را وارد کنید تا وزن (specificity) هرکدام به فرمت چهارتایی محاسبه و با نوار بصری مقایسه شود.

وقتی چند قانون به یک عنصر استایل می‌دهند، مرورگر بر اساس specificity تصمیم می‌گیرد کدام غالب شود؛ این ابزار این محاسبه را روشن می‌کند.

توسعه‌دهندگان هنگام رفع تداخل استایل از این ابزار استفاده می‌کنند. برای مرتب‌کردن کد CSS از مرتب‌ساز CSS کمک بگیرید.

سوالات متداول

specificity در CSS چیست؟

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

چرا استایل من اعمال نمی‌شود؟

معمولاً چون یک سلکتور با specificity بالاتر همان ویژگی را تعیین کرده و بر قانون شما غلبه می‌کند.

استفاده از important توصیه می‌شود؟

important قوانین specificity را دور می‌زند و بهتر است کم استفاده شود چون نگهداری کد را سخت می‌کند.