اختصاصی

پادکست CSS - 003: Specificity

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

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

.branding {
  color: blue;
}

button {
  color: red;
}

دو قانون وجود دارد که یک عنصر را در اینجا هدف قرار می دهد. هر قانون حاوی یک اعلان است که می خواهد رنگ دکمه را تنظیم کند: یکی سعی می کند دکمه را قرمز رنگ کند و دیگری سعی می کند آن را آبی رنگ کند. کدام اعلان برای عنصر اعمال می شود؟

درک الگوریتم اختصاصی بودن CSS کلید درک نحوه تصمیم گیری CSS بین اعلان های رقیب است.

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

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

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

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

ویژگی یک عدد اعشاری نیست بلکه یک سه گانه است که از سه جزء تشکیل شده است: A ، B و C

  • A : ویژگی id مانند
  • B : ویژگی کلاس مانند
  • C : ویژگی عنصر مانند

اغلب با استفاده از علامت (A,B,C) نشان داده می شود. به عنوان مثال: (1,0,2) . نماد جایگزین ABC نیز معمولا استفاده می شود.

نموداری که سه جزء ویژگی (A,B,C) را نشان می دهد. برای هر جزء، نمودار نشان می‌دهد که چه چیزی را نشان می‌دهد و چند نمونه انتخابگر که بر آن تأثیر می‌گذارند.
نموداری که نشان می دهد انتخابگرهای مختلف بر چه جزء ویژگی تأثیر می گذارند.

مقایسه مشخصات

ویژگی ها با مقایسه سه جزء به ترتیب مقایسه می شوند: ویژگی با مقدار A بزرگتر مشخص تر است. اگر دو مقدار A گره خورده باشند، آنگاه ویژگی با مقدار B بزرگتر مشخص تر است. اگر دو مقدار B نیز گره خورده باشند، آنگاه ویژگی با مقدار C بزرگتر مشخص تر است. اگر همه مقادیر گره خورده باشند، دو ویژگی برابر هستند.

به عنوان مثال، (1,0,0) ویژگی بالاتری نسبت به (0,4,3) در نظر گرفته می شود، زیرا مقدار A در (1,0,0) (که 1 است) بزرگتر از مقدار A از (0,4,3) (که 0 است).

انتخابگرها بر ویژگی تأثیر می گذارند

هر بخش در سه گانه ویژگی با مقدار 0 شروع می شود، بنابراین ویژگی پیش فرض (0,0,0) است. هر قسمت از یک انتخابگر ویژگی را افزایش می دهد که بسته به نوع انتخابگر، مقدار A ، B یا C را افزایش می دهد.

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

یک انتخابگر جهانی ( * ) هیچ ویژگی اضافه نمی کند و مقدار آن را در ویژگی اولیه (0,0,0) باقی می گذارد.

* {
  color: red;
}

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

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

مثال های زیر دارای ویژگی کلی (0,0,1) هستند.

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

div {
  color: red;
}

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

::selection {
  color: red;
}

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

انتخابگر کلاس ، شبه کلاس یا ویژگی، ویژگی کلاس مانندی را اضافه می کند که مؤلفه B را 1 افزایش می دهد.

مثال های زیر دارای ویژگی (0,1,0) هستند.

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

.my-class {
  color: red;
}

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

:hover {
  color: red;
}

انتخابگر صفت 

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

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

یک انتخابگر ID ویژگی‌های id مانند را اضافه می‌کند که مؤلفه A را 1 افزایش می‌دهد، تا زمانی که از یک انتخابگر ID ( #myID ) و نه انتخاب‌کننده ویژگی ( [id="myID"] ] استفاده کنید.

در مثال زیر، ویژگی (1,0,0) است.

#myID {
  color: red;
}

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

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

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

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

این نمونه دارای ویژگی (0،1،1) است زیرا دارای یک انتخابگر نوع ( div ) و یک کلاس در داخل :not() است.

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

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

ویژگی a[href="#"] چیست؟

(0,0,1)
a ارزش (0,0,1) دارد اما [href="#"] ارزش (0,1,0) دارد.
(0,1,0)
دوباره امتحان کنید! a ارزش (0,0,1) دارد اما [href="#"] ارزش (0,1,0) دارد.
(0,1,1)
a ارزش دارد (0,0,1) و [href="#"] ارزش (0,1,0) دارد و ویژگی کلی (0,1,1) را ایجاد می کند.

عواملی که بر ویژگی تأثیر نمی گذارد

برخی از تصورات غلط رایج در مورد عوامل زیر بر ویژگی وجود دارد.

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

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

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

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

به عنوان مثال، می توانید !important به آن اضافه کنید تا بخشی از مبدا Authored !important شود.

!important

یک !important در پایان یک اعلان CSS بر ویژگی آن تأثیر نمی گذارد اما اعلان را در یک مبدا متفاوت قرار می دهد، یعنی Authored !important .

در مثال زیر، ویژگی .my-class . برای برنده شدن اعلامیه !important مرتبط نیست. 

.my-class {
  color: red !important;
  color: white;
}

وقتی دو اعلان !important هستند، آنگاه ویژگی دوباره وارد بازی می شود، زیرا مرحله مبدا از آبشار هنوز قادر به تعیین برنده نبوده است. 

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

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

هنگامی که از یک انتخابگر پیچیده یا مرکب استفاده می شود، هر قسمت از آن انتخابگر به ویژگی اضافه می شود. این مثال HTML را در نظر بگیرید: 

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

این لینک دارای دو کلاس است. قانون در CSS زیر دارای ویژگی (0,0,1) است: 

a {
  color: red;
}

اگر به یکی از کلاس ها در انتخابگر ارجاع دهید، اکنون دارای ویژگی (0,1,1) است: 

a.my-class {
  color: green;
}

کلاس دیگر را به انتخابگر اضافه کنید، اکنون ویژگی (0,2,1) دارد: 

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

ویژگی href را به انتخابگر اضافه کنید، اکنون دارای ویژگی (0,3,1) است: 

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

در نهایت، یک شبه کلاس :hover به همه آن اضافه کنید، انتخابگر با ویژگی (0,4,1) ختم می شود: 

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

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

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

کدام یک از انتخابگرهای زیر دارای ویژگی (0,2,1) است؟

article > section
عناصر ویژگی شبه عنصر را اضافه می کنند (جزء «C»). 2 عنصر در انتخابگر وجود دارد که باعث می شود ویژگی آن (0,0,2) باشد.
article.card.dark
عناصر ویژگی شبه عنصر را اضافه می کنند (جزء` C) و کلاس ها ویژگی کلاس مانند (جزء` B) را اضافه می کنند. با 2 کلاس و 1 عنصر، این انتخابگر دارای ویژگی (0,2,1) است.
article:hover a[href]
عناصر ویژگی شبه عنصر را اضافه می کنند (جزء 'C')، شبه کلاس ها و ویژگی ها ویژگی کلاس مانند (جزء 'B') را اضافه می کنند. 2 انتخابگر عنصر (2 × (0,0,1) )، یک انتخابگر ویژگی (ارزش (0,0,1) ) و یک انتخابگر کلاس (ارزش (0,0,1) ) وجود دارد. این باعث می شود که این انتخابگر دارای ویژگی کلی (0,2,2) باشد.

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

فرض کنید مقداری CSS دارید که شبیه این است: 

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

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

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

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

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

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

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

button[onclick] {
  background: grey;
}

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

تساوی در ویژگی به مرحله بعدی در آبشار باز می گردد

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

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

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

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

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

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

منابع