اختصاصی

پادکست CSS - 003: Specificity

فرض کنید که با HTML و CSS زیر کار می کنید:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

در اینجا دو قانون رقابتی وجود دارد. یکی دکمه را قرمز و دیگری آن را آبی می کند. کدام قانون برای عنصر اعمال می شود؟ درک الگوریتم مشخصات CSS در مورد ویژگی، کلید درک چگونگی تصمیم گیری CSS بین قوانین رقیب است.

ویژگی یکی از چهار مرحله متمایز آبشار است که در آخرین ماژول، روی آبشار پوشش داده شد.

امتیازدهی ویژه

هر قانون انتخابگر یک امتیاز می گیرد. شما می توانید ویژگی را به عنوان یک نمره کل در نظر بگیرید و هر نوع انتخابگر امتیازی را نسبت به آن امتیاز کسب می کند. انتخاب کننده با بالاترین امتیاز برنده است.

با مشخص بودن در یک پروژه واقعی، عمل متعادل کننده این است که مطمئن شوید قوانین CSS که انتظار دارید اعمال شوند، واقعاً اعمال می شوند، در حالی که به طور کلی برای جلوگیری از پیچیدگی، امتیازات را پایین نگه دارید. امتیاز باید فقط به اندازه ای که ما نیاز داریم بالا باشد، نه اینکه بالاترین امتیاز ممکن را هدف بگیریم. در آینده، ممکن است نیاز به استفاده از برخی CSSهای واقعاً مهم‌تر باشد. اگر به دنبال بالاترین امتیاز باشید، این کار را سخت خواهید کرد.

امتیاز دهی به هر نوع انتخابگر

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

انتخابگر جهانی

انتخابگر جهانی ( * ) هیچ ویژگی خاصی ندارد و 0 امتیاز می گیرد. این بدان معنی است که هر قانون با 1 یا بیشتر امتیاز آن را لغو می کند

* {
  color: red;
}

انتخابگر عنصر یا شبه عنصر

یک عنصر (نوع) یا انتخابگر شبه عنصر 1 امتیاز ویژگی را دریافت می کند.

انتخابگر تایپ

div {
  color: red;
}

انتخابگر شبه عنصر

::selection {
  color: red;
}

انتخابگر کلاس، شبه کلاس یا ویژگی

انتخابگر کلاس ، شبه کلاس یا ویژگی 10 امتیاز اختصاصی را دریافت می کند.

انتخابگر کلاس

.my-class {
  color: red;
}

انتخابگر شبه کلاس

:hover {
  color: red;
}

انتخابگر صفت

[href='#'] {
  color: red;
}

خود کلاس شبه :not() چیزی به محاسبه ویژگی اضافه نمی کند. با این حال، انتخابگرهایی که به عنوان آرگومان ارسال می شوند، به محاسبه ویژگی اضافه می شوند.

div:not(.my-class) {
  color: red;
}

این نمونه دارای 11 نقطه مشخصه است زیرا یک انتخابگر نوع ( div ) و یک کلاس در داخل :not() دارد.

انتخابگر شناسه

یک انتخابگر ID 100 امتیاز از ویژگی را دریافت می کند، به شرطی که از یک انتخابگر شناسه ( #myID ) و نه انتخابگر ویژگی ( [id="myID"] استفاده کنید.

#myID {
  color: red;
}

ویژگی سبک درون خطی

CSS که مستقیماً به ویژگی style عنصر HTML اعمال می شود، امتیاز ویژگی 1000 را دریافت می کند. این بدان معناست که برای لغو آن در CSS، باید یک انتخابگر بسیار خاص بنویسید.

<div style="color: red"></div>

!important

در نهایت، یک !important در پایان یک مقدار CSS امتیاز ویژگی 10000 را دریافت می کند. این بالاترین خصوصیتی است که یک آیتم می تواند به دست آورد.

یک قانون !important برای یک ویژگی CSS اعمال می شود، بنابراین همه چیز در قانون کلی (انتخاب کننده و ویژگی ها) امتیاز ویژگی یکسانی را دریافت نمی کند.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

درک خود را بررسی کنید

دانش خود را در مورد امتیازدهی اختصاصی آزمایش کنید

امتیاز اختصاصی a[href="#"] چیست؟

1
a ارزش 1 امتیاز دارد، اما [href="#"] ارزش 10 امتیاز دارد.
5
دوباره امتحان کنید!
11
a دارای 1 امتیاز و [href="#"] 10 امتیاز است که مجموع امتیاز آن 11 است.

ویژگی در زمینه

ویژگی هر انتخابگر که با یک عنصر مطابقت دارد با هم اضافه می شود. این مثال HTML را در نظر بگیرید:

<a class="my-class another-class" href="#">A link</a>

این لینک دارای دو کلاس است. CSS زیر را اضافه کنید، و 1 امتیاز ویژه دریافت می کند:

a {
  color: red;
}

به یکی از کلاس های این قانون ارجاع دهید، اکنون 11 امتیاز ویژه دارد:

a.my-class {
  color: green;
}

کلاس دیگر را به انتخابگر اضافه کنید، اکنون 21 امتیاز ویژه دارد:

a.my-class.another-class {
  color: rebeccapurple;
}

ویژگی href را به انتخابگر اضافه کنید، اکنون دارای 31 امتیاز ویژه است:

a.my-class.another-class[href] {
  color: goldenrod;
}

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

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

درک خود را بررسی کنید

دانش خود را در مورد امتیازدهی اختصاصی آزمایش کنید

کدام یک از انتخابگرهای زیر 21 امتیاز دارد؟

article > section
عناصر دارای 1 امتیاز هستند، 2 عنصر در انتخابگر وجود دارد که باعث می شود این ارزش 2 امتیاز داشته باشد.
article.card.dark
ارزش عناصر 1 امتیاز، کلاس ها 10 امتیاز و با 2 کلاس و 1 عنصر، این انتخابگر را 21 امتیاز می کند.
article:hover a[href]
ارزش عناصر 1 امتیاز، شبه کلاس ها و ویژگی ها 10 امتیاز، 2 امتیاز برای عناصر و 20 امتیاز برای ویژگی ها و کلاس ها، این انتخابگر را 22 امتیاز می کند.

تجسم ویژگی

در نمودارها و ماشین‌حساب‌های ویژگی، ویژگی اغلب به این صورت تجسم می‌شود:

نموداری که خاص ترین انتخابگرها را نشان می دهد

گروه سمت چپ انتخابگرهای id هستند. گروه دوم انتخابگرهای کلاس، صفت و شبه کلاس هستند. گروه نهایی انتخابگرهای المان و شبه عنصر هستند.

برای مرجع، انتخابگر زیر 0-4-1 است:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

درک خود را بررسی کنید

دانش خود را در مورد تجسم ویژگی آزمایش کنید

کدام یک از انتخابگرهای زیر 1-2-1 است؟

section#specialty.dark
این انتخابگر به صورت 1-1-1 تجسم می شود.
#specialty:hover li.dark
🎉
[data-state-rad].dark#specialty:hover
این انتخابگر به صورت 1-3-0 تجسم می شود.
li#specialty section.dark
این انتخابگر به صورت 1-1-2 تجسم می شود.

افزایش عملی ویژگی

بیایید بگوییم که ما چند CSS داریم که شبیه این است:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

با HTML که به شکل زیر است:

<button class="my-button" onclick="alert('hello')">Click me</button>

دکمه دارای پس‌زمینه خاکستری است، زیرا انتخابگر دوم 11 امتیاز ویژه کسب می‌کند ( 0-1-1 ). این به این دلیل است که یک انتخابگر نوع ( button ) دارد که 1 امتیاز است و یک انتخابگر ویژگی ( [onclick] ) که 10 امتیاز است.

قانون قبلی .my-button - 10 امتیاز می گیرد ( 0-1-0 )، زیرا یک انتخابگر کلاس دارد.

اگر می خواهید این قانون را تقویت کنید، انتخابگر کلاس را به این صورت تکرار کنید:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

اکنون، دکمه یک پس‌زمینه آبی خواهد داشت، زیرا انتخابگر جدید امتیاز ویژگی 20 را دریافت می‌کند ( 0-2-0 ).

یک امتیاز ویژگی منطبق، برنده جدیدترین نمونه را می‌بیند

بیایید فعلاً با مثال دکمه بمانیم و CSS را به این تغییر دهیم:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

دکمه دارای پس‌زمینه خاکستری است، زیرا هر دو انتخابگر دارای امتیاز ویژگی یکسان هستند ( 0-1-0 ).

اگر قوانین را به ترتیب منبع تغییر دهید، دکمه آبی خواهد بود.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

این تنها موردی است که CSS جدیدتر برنده می شود. برای انجام این کار باید با ویژگی انتخابگر دیگری که همان عنصر را هدف قرار می دهد مطابقت داشته باشد.

منابع