قانون !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 ਕੋਡ ਨੂੰ ਬਿਗੜਾ ਦੇਵੇਗਾ ਅਤੇ ਜਾਇਜ਼ੇ ਵੀ ਮੁਸ਼ਕਿਲ ਹੋ ਜਾਵੇਗਾ, ਖਾਸ ਕਰਕੇ ਤੁਹਾਡੇ ਵੱਡੇ ਸਟਾਈਲ ਸ਼ੈਲੀ ਵਿੱਚ!

ਇੱਥੇ ਅਸੀਂ ਇੱਕ ਸਰਲ ਉਦਾਹਰਣ ਬਣਾਇਆ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ CSS ਸੰਸਕਰਣ ਦੇਖਦੇ ਹੋ, ਤਾਂ ਇਹ ਨਹੀਂ ਪਤਾ ਚਲਦਾ ਕਿ ਕਿਸ ਰੰਗ ਨੂੰ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਮਹੱਤਵ ਹੈ:

مثال

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

خود بخود چرب کریں

ਸੁਝਾਅ:ਸਮਝੋ !important ਨਿਯਮ ਚੰਗੇ ਹਨ। ਤੁਸੀਂ ਕੁਝ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਇਸ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ। ਲੇਕਿਨ, ਤੁਸੀਂ ਜਦੋਂ ਤਕ ਲਾਜ਼ਮੀ ਨਹੀਂ ਹੋਵੇ ਤਾਂ ਇਸ ਦਾ ਇਸਤੇਮਾਲ ਨਾ ਕਰੋ।

ਸਮਝਦਾਰ ਹੈ ਕਿ ਇੱਕ ਦੋ ਸ਼ਾਇਦ ਕੁਝ ਸਮਝਦਾਰ ਵਰਤੋਂ ਹੋ ਸਕਦੀਆਂ ਹਨ !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;
}

خود بخود چرب کریں