چیست! مهم است؟

!importantقانون در CSS استفاده می شود برای اضافه اهمیت بیشتر به یک / ارزش ملک از حالت طبیعی.

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

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

مثال

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

مثال توضیح داده شده

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


مهم درباره! مهم است

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

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

مثال

#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}

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


شاید یک یا دو استفاده منصفانه از! مهم

یکی از راه های استفاده !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;
}

منبع