قوانین !important CSS

!important چیست؟

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

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

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

مثال

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

آزمایش کنید

توضیح مثال

در مثال بالا، همه سه بخش دارای رنگ پس‌زمینه قرمز خواهند شد، حتی اگر انتخاب‌گر ID و انتخاب‌گر کلاس خاصیت بالاتری دارند.!important قوانین پوشش دادن این دو حالت را برای attribute 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;
}

آزمایش کنید