Mengapa kita perlu menggunakan !important?-tutorial css-php.cn

Mengapa kita perlu menggunakan !important?

王林

Lepaskan： 2023-08-23 21:45:02

ke hadapan

1086 orang telah melayarinya

Mengapa kita perlu menggunakan !important?

Dalam CSS, '!penting' ialah kata kunci yang kami gunakan dengan nilai sifat CSS. Apabila kita menggunakan '!penting' dengan nilai sifat CSS, penyemak imbas memberikan lebih kepentingan kepada nilai sifat itu berbanding nilai sifat lain pada elemen yang sama.

Berikut ialah beberapa kes penggunaan di mana kami perlu menggunakan '!penting' dengan nilai sifat CSS.

Dalam Sistem pengurusan kandungan (CMS), kami tidak boleh mengedit CSS halaman web. Jadi, jika kita menambah CSS tambahan pada halaman web, ia tidak boleh digunakan pada elemen tertentu, tetapi jika kita menggunakan '!penting' dengan CSS, kita boleh mengatasi nilai awal sifat CSS tertentu.
Setiap kali kami menggunakan mana-mana perpustakaan UI dalam rangka kerja web seperti ReactJS, Svelte, dll., kadangkala kami tidak boleh mengedit CSS komponen UI. Dalam kes sedemikian, kita boleh menggunakan sifat '!penting' dengan sifat CSS untuk mengatasi nilainya.
Aplikasi masa nyata mengandungi fail CSS yang besar. Kadangkala, CSS tidak menjejaskan elemen disebabkan penggantian yang tidak diketahui. Dalam kes ini, kita boleh menggunakan '!penting' untuk mengatasi semua nilai harta tertentu pada elemen tertentu.

Sintaks

Pengguna boleh mengikut sintaks di bawah untuk menggunakan ‘!penting’ dengan nilai sifat CSS.

CSS-property: value !important

Salin selepas log masuk

Dalam sintaks di atas, CSS-property boleh menjadi mana-mana sifat CSS seperti margin, padding, padding-left, font-size, dsb., dan nilai yang dihormati untuk sifat CSS.

Contoh

Dalam contoh di bawah, kami telah mencipta tiga elemen div dengan nama kelas 'hitam', 'kelabu' dan 'merah'. Dalam CSS, kami telah memberikan warna latar belakang kepada elemen div berdasarkan nama kelas.

Selain itu, kami telah menggunakan sifat CSS 'warna latar belakang: merah jambu' pada semua elemen div dengan kata kunci '!penting'. Dalam output, pengguna boleh melihat bahawa semua warna latar belakang div menjadi merah jambu kerana kami telah menggunakan '!penting'.

<html>
<head>
   <style>
      .black {background-color: black;}
      .grey {background-color: grey;}
      .red {background-color: red;}
      div {
         background-color: pink !important;
         margin: 5px;
      }
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <div class = "black">
      This is a black div.
   </div>
   <div class = "grey">
      This is a grey div.
   </div>
   <div class = "red">
      This is a red div.
   </div>
</body>
</html>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami telah mencipta dua perenggan berbeza. Satu perenggan mengandungi nama kelas 'satu', dan satu lagi mengandungi 'dua' sebagai nama kelas. Kami telah menggunakan beberapa CSS pada semua

elemen.

Untuk mengatasi CSS elemen dengan nama kelas 'satu', kami telah menggunakan kata kunci '!penting' untuk mengatasi gaya yang digunakan pada elemen '

'. Dalam output, pengguna dapat melihat bahawa perenggan pertama mempunyai gaya yang berbeza.

<html>
<head>
   <style>
      p {
         padding: 20px;
         background-color: #f1f1f1;
         border: 1px solid #ccc;
         border-radius: 5px;
      }
      .one {
         background-color: green !important;
         border: 5px dotted blue !important;
      }
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <p class = "one"> This is a paragraph. </p>
   <p class = "two"> This is another paragraph. </p>
</body>
</html>

Salin selepas log masuk

Contoh

Kami akan belajar untuk mengatasi '!penting' dengan menggunakan '!penting' lain melalui contoh yang diberikan di bawah. Kami telah mencipta tiga elemen div dengan nama kelas 'awal', 'tengah' dan 'akhir'.

Kami telah menggunakan '!penting' dengan sifat CSS warna latar belakang, yang kami gunakan pada elemen div. Jadi, Pada mulanya, semua latar belakang elemen div ialah aqua. Selepas itu, kami sekali lagi menggunakan '!penting' dengan sifat CSS warna latar belakang sambil menerapkannya pada elemen dengan nama kelas 'tengah' dan 'akhir'.

Dalam output, pengguna dapat melihat bahawa warna biru dan lightsalmon mengatasi warna 'aqua'.

<html>
<head>
   <style>
      div {
         background-color: aqua !important;
         margin: 10px;
         padding: 5px;
      }
      .middle {background-color: blue !important;}
      .final {background-color: lightsalmon !important;}
   </style>
</head>
<body>
   <h2> Using the <i> !important </i> with CSS property values </h2>
   <div class = "initial">
      This is an initial Div element.
   </div>
   <div class = "middle">
      This is a middle Div element.
   </div>
   <div class = "final">
      This is a final Div element.
   </div>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Pengguna belajar menggunakan '!penting' dalam CSS. Pada asasnya, kita harus mengelakkan penggunaan berlebihan '!penting'; jika tidak, ia boleh menjadi sakit kepala bagi sesiapa sahaja untuk menyelesaikan banyak perkara '!penting' kerana ia mengatasi CSS untuk elemen tersebut.

Walau bagaimanapun, pengguna boleh menggunakan ‘!penting’ semasa mengemas kini CSS bagi mana-mana sistem pengurusan kandungan perpustakaan atau komponen UI.

Atas ialah kandungan terperinci Mengapa kita perlu menggunakan !important?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!