ویژگی‌های خاص CSS

خصوصیت چیست؟

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

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

انتخابگر عمومی (*)) خاصیت پایین‌تری دارد، در حالی که انتخابگر ID خاصیت بالاتری دارد!

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

لایه‌بندی خاصیت

هر انتخاب‌گر در هرم خاصیت دارای موقعیتی خاص است. چهار دسته زیر تعریف‌کننده سطح خاصیت انتخاب‌گرها هستند:

استایل درون‌ریزی - استایل‌های درون‌ریزی مستقیماً به عنصر استایل‌گذاری شده متصل می‌شوند. مثال：<h1 style="color: #ffffff;">.

ID - ID شناسه منحصر به فرد عناصر صفحه است، مانند #navbar.

کلاس، ویژگی و pseudo-classes - این دسته شامل .classes، [attributes] و pseudo-classes است، مانند :hover، :focus و غیره.

عناصر و pseudo-elements - این دسته شامل نام‌های عنصر و pseudo-elements است، مانند h1، div، :before و :after.

چگونه خاصیت را محاسبه می‌کنیم؟

لطفاً روش محاسبه خاصیت را به خاطر بسپارید!

از 0 شروع کنید، به attribute استایل 1000 اضافه کنید، به هر ID 100، به هر ویژگی، کلاس یا پseudo-class 10 و به هر نام عنصر یا pseudo-element 1 اضافه کنید.

لطفاً سه کد زیر را در نظر بگیرید:

مثال

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">عنوان</h1></div>
  • خصوصیت A 1 است (یک عنصر)
  • خصوصیت B 101 است (یک ID و یک عنصر)
  • خصوصیت C 1000 است (استایل درون‌ریزی)

به دلیل اینکه 1 < 101 < 1000، بنابراین سومین قانون (C) خاصیت بیشتری دارد، بنابراین اعمال خواهد شد.

قوانین خاصیت 1:

در شرایطی که خاصیت یکسان است: قانون جدید مهم است - اگر قانونی دو بار در فایل استایل خارجی نوشته شود، قانون بعدی به علت نزدیکی به عناصر استایل‌گذاری شده، اعمال خواهد شد:

مثال

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

آزمایش کنید

قانون بعدی همیشه اعمال خواهد شد.

قوانین خاصیت 2:

انتخاب‌گر‌های ID از انتخاب‌گر‌های ویژگی‌ها خاصیت بیشتری دارند - لطفاً سه خط کد زیر را ببینید:

مثال

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

آزمایش کنید

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

قوانین خاصیت 3:

انتخاب‌گر‌های محیطی از انتخاب‌گر‌های عناصر خاص‌تر هستند - استایل‌های درون‌ریزی به علت نزدیکی به عناصر استایل‌گذاری شده، در موارد زیر:

مثال

از فایل‌های CSS خارجی:

#content h1 {background-color: red;}

در فایل HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

قانون بعدی اعمال می‌شود.

قوانین خاصیت 4:

انتخاب‌گرهای نوع کلاس می‌توانند هر تعداد انتخاب‌گر عناصر را شکست دهند - انتخاب‌گرهای نوع کلاس (مثل .intro که h1، p، div و غیره را شکست می‌دهد):

مثال

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

آزمایش کنید

علاوه بر این،انتخاب‌گرهای عمومی و مقادیر ارث‌برداری شده دارای خاصیت 0 هستند - خاصیت * و body * و شبیه آن‌ها دارای خاصیت 0 هستند. مقادیر ارث‌برداری شده نیز خاصیت 0 دارند.