قاعدة !important CSS

ما هو !important؟

في CSS !important القاعدة لتعزيز الأولوية لخصائص/القيم أكثر من النمط العادي.

في الواقع، إذا كنت قد استخدمت !important القاعدة، والتي ستغطي جميع النمطات السابقة للخصائص المحددة للعنصر!

دعونا نرى مثالًا:

مثال

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

تجربة شخصية

توضيح الأمثلة

في هذا المثال، ستحصل جميع الثلاثة أقسام على لون خلفية أحمر، على الرغم من أن اختيار ID والصفة لديها تفاصيل التخصص العالية.!important القاعدة تغطي كلا الحالتين لخصائص background-color.

معلومات مهمة حول !important

تغطية !important الطريقة الوحيدة لتغطية القاعدة هي بتضمين إعلان آخر يحتوي على نفس (أو أعلى) تفاصيل التخصص في !important القاعدة - هذا هو بداية المشكلة! هذا يجعل رمز CSS معقدًا، ويتعقد التتبع أيضًا، خاصة عندما يكون لديك جدول استyles كبيرًا!

في هذا المثال، قمنا بإنشاء مثال بسيط. عند مراجعة رمز 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;
}

تجربة شخصية