قانون !important CSS

!important چیست؟

CSS !important قوانین برای افزایش اولویت attribute/value نسبت به سبک‌های معمول استفاده کنید.

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

بیایید به یک مثال نگاه کنیم:

مثال

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

آزمایش کنید

توضیح مثال

در مثال بالا، همه سه بخش دارای رنگ پس‌زمینه قرمز خواهند شد، حتی اگر انتخاب‌گرهای ID و کلاس دارای خاصیت بالاتر هستند.!important قوانین تغییر کرده است و این دو مورد از خاصیت background-color را تغییر داده است.

مهم‌ترین نکات درباره !important

تغییر !important تنها راه برای تغییر قوانین، در منابع کد شامل یک اعلام دیگری با خاصیت مشابه (یا بالاتر) است !important قوانین - این است که شروع به مشکلات می‌کند! این باعث می‌شود که کد CSS شلوغ شود و دیباگ کردن نیز دشوار می‌شود، به ویژه در صورت داشتن یک جدول سبک بزرگ!

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

مثال

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

آزمایش کنید

نکته:آگاهی !important قوانین خوب هستند. ممکن است در برخی از کد منابع CSS آن را ببینید. اما، مگر اینکه شما واقعاً مجبور باشید از آن استفاده کنید، از آن استفاده نکنید.

ممکن است یک یا دو مورد استفاده معقول از !important وجود داشته باشد

یکی از موارد استفاده !important وضعیت این است، اگر شما مجبور هستید که سبکی که نمی‌توانید به هیچ وجه تغییر دهید، تغییر دهید. این ممکن است به این دلیل باشد که شما از سیستم مدیریت محتوای (CMS) استفاده می‌کنید و نمی‌توانید کد CSS را ویرایش کنید. سپس می‌توانید برخی از سبک‌های سفارشی را تنظیم کنید تا برخی از سبک‌های CMS را تغییر دهید.

یکی از موارد استفاده !important وضعیت این است: فرض کنید که می‌خواهید تمامی دکمه‌های صفحه وب شما دارای ظاهر خاصی باشند. در اینجا، سبک دکمه‌ها شامل رنگ پس‌زمینه خاکستری، متن سفید و برخی از فضاهای داخلی و حاشیه‌ها است:

مثال

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

آزمایش کنید

اگر باتن را در عنصر دیگری با خاصیت بالاتر قرار دهیم، ظاهر باتن ممکن است تغییر کند و اصلارضایتی نیز تغییر کند. در اینجا یک مثال آورده شده است:

مثال

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

آزمایش کنید

برای اینکه تمام دکمه‌ها در هر زمانی ظاهر یکسانی داشته باشند، می‌توانیم !important قوانین را به ویژگی‌های دکمه اضافه کنید، مانند:

مثال

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

آزمایش کنید