محاسبهگر اختصاصیبودن CSS
یک انتخابگر CSS را جایگذاری کنید و دقیقاً ببینید چقدر اختصاصی است — یا دو انتخابگر را با هم مقایسه کنید تا بفهمید کدامیک واقعاً برنده میشود.
دربارهٔ این ابزار
این ابزار چه کاری انجام میدهد
اختصاصیبودن CSS تعیین میکند وقتی دو انتخابگر یک عنصر یکسان را هدف میگیرند، کدام قانون برنده شود. این محاسبهگر یک انتخابگر را تجزیه میکند و آن را به وزن چهاربخشی مورد استفاده واقعی مشخصات CSS تقسیم میکند — سبکهای درونخطی، انتخابگرهای شناسه، انتخابگرهای کلاس/ویژگی/شبهکلاس و انتخابگرهای عنصر/شبهعنصر — سپس اگر انتخابگر دومی وارد کنید، میگوید کدامیک واقعاً اعمال خواهد شد.
نحوهٔ استفاده
یک انتخابگر را در «انتخابگر A» جایگذاری کنید تا بلافاصله جزئیات اختصاصیبودن آن را ببینید. برای مقایسه دو قانون رقیب و مشاهده نتیجهای ساده درباره اینکه کدامیک برنده میشود، انتخابگر دومی را در «انتخابگر B» وارد کنید؛ ازجمله اینکه چگونه !important نتیجه را تغییر میدهد. این ابزار گزینشگرهای مدرن را نیز درک میکند — :not(), :is()، و :has() اختصاصیتِ خاصترین آرگومان خود را محاسبه میکنند، در حالی که :where() بهدرستی مقدار صفر را به خود اختصاص میدهد؛ دقیقاً همانطور که مشخصات CSS تعریف کرده است.
موارد استفادهٔ رایج
- پیدا کردن دلیل اعمال نشدن یک سبک، با اینکه انتخابگر «درست به نظر میرسد»
- تصمیمگیری بین دو روش نوشتن یک انتخابگر، وقتی میخواهید گزینهای با اختصاصیت کمتر را برای بازنویسی آسانتر در آینده انتخاب کنید
- بررسی یک pull request و بررسی سریع اینکه آیا قانون جدید بهطور تصادفی بر قانون موجود غلبه میکند یا نه
- آموزش یا یادگیری نحوه عملکرد واقعی آبشار و اختصاصیت، فراتر از «فقط کلاسهای بیشتری اضافه کن»
سؤالات متداول
اختصاصیت CSS دقیقاً چگونه محاسبه میشود؟
این امتیاز چهاربخشی معمولاً بهصورت (a, b, c, d) نوشته میشود: سبکهای درونخطی بالاترین سطح را دارند، پس از آن انتخابگرهای شناسه، سپس کلاسها/انتخابگرهای ویژگی/شبهکلاسها و در پایان انتخابگرهای عنصر و شبهعنصر قرار میگیرند. انتخابگرها سطحبهسطح و از چپ به راست با هم مقایسه میشوند — یک شناسه همیشه از هر تعداد کلاس قویتر است.
تخصیصپذیری :not() چقدر است؟
هیچ اختصاصیتی از خودش ندارد — اختصاصیت هر انتخابگری را که داخل پرانتزهایش قرار دارد، به خود میگیرد. :not(.disabled) بهاندازهٔ یک کلاس، مانند .disabled بهتنهایی انجام میداد.
چرا :where() اختصاصیت صفر دارد؟
این مورد بهطور خاص اضافه شد تا نویسندگان بتوانند انتخابگرهای پیچیدهای بنویسند — اغلب برای تعیین محدوده یا بازنشانی — بدون اینکه هیچ وزنی به اختصاصیت اضافه شود؛ در نتیجه، بازنویسی آنها در ادامه بسیار آسان است.
آیا ترتیب گزینشگرها در شیوهنامهام مهم است؟
فقط بهعنوان معیار شکست تساوی. اگر دو قانون اختصاصیت یکسانی داشته باشند، قانونی که در ترتیب منبع دیرتر ظاهر میشود برنده است. اگر اختصاصیت متفاوت باشد، مقدار بالاتر همیشه برنده است، صرفنظر از ترتیب.
چرا افزودن !important بازنویسیام را خراب کرد؟
!important اختصاصیت را کاملاً نادیده میگیرد و قاطعانه برنده میشود — مگر اینکه قانون دیگری نیز نشانهگذاری شده باشد !important، که در این صورت، اختصاصیت (و سپس ترتیب منبع) بین آن دو تعیینکننده است !important قوانین.