Kekhususan CSS Diterangkan: Cara Kawal Gaya Mana Yang Menang

Pernahkah anda meluangkan masa berjam-jam untuk mengubah suai CSS anda, tertanya-tanya mengapa gaya degil itu tidak akan digunakan? Selamat datang ke dunia kekhususan.

Kekhususan ialah cara penyemak imbas memutuskan peraturan CSS yang hendak digunakan apabila berbilang peraturan menyasarkan elemen yang sama. Tanpa memahaminya, helaian gaya anda boleh bertukar menjadi kusut masai dengan cepat. Mari pecahkannya.

Hierarki Kekhususan

1. Pemilih Universal: Pesaing Titik Sifar

Pemilih universal (*) berada di bahagian bawah rantai kekhususan dengan 0 mata. Ia seperti peraturan menyeluruh untuk segala-galanya tetapi ditindih oleh hampir perkara lain.

Contoh:

* {
  color: red;
}
h1 {
  color: blue;
}

Walaupun dengan * { warna: merah; },

akan menjadi biru kerana pemilih elemen menang.

2. Pemilih Elemen: 1 Titik Kekhususan

Pemilih elemen (h1, p, div) lebih kuat daripada pemilih universal, membawa 1 mata.

Contoh:

h1 {
  color: green;
}

Peraturan ini akan mengatasi pemilih universal yang menyasarkan elemen yang sama.

3. Kelas, Kelas Pseudo atau Pemilih Atribut: 10 Mata

Pemilih seperti .button, :hover atau [type="text"] adalah lebih khusus, dengan 10 mata.

Contoh:

.button {
  color: purple;
}

Ini akan mengatasi kedua-dua pemilih universal dan elemen.

4. Pemilih ID: 100 Mata

ID (#submitButton) jauh lebih berkuasa, dengan 100 mata. Gunakannya dengan berhati-hati, kerana ia boleh membuat gaya lebih sukar untuk diurus.

Contoh:

#submitButton {
  background-color: yellow;
}

5. Gaya Sebaris: 1,000 Mata – The Heavyweight

Gaya sebaris mengatasi segala-galanya kecuali !penting.

Contoh:

<div>



<h4>
  
  
  6. The Almighty !important
</h4>

<p>Adding !important forces a rule to override others, even inline styles. But overusing it can lead to chaos in your CSS. It can be necessary when using third-party libraries to help override predefined styles.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.button {
  color: red !important;
}

Apabila Ikatan Kekhususan, Pesanan Penting

Jika dua peraturan mempunyai kekhususan yang sama, peraturan yang datang kemudian dalam lembaran gaya akan menang.

Contoh:

h1 {
  color: red;
}
h1 {
  color: green;
}

Di sini,

akan menjadi hijau kerana peraturan kedua adalah kemudian.

Rekap Mata Kekhususan

• Pemilih Universal (*): 0 mata
• Pemilih Elemen (div, p): 1 mata
• Kelas, Kelas Pseudo, Pemilih Atribut: 10 mata
• Pemilih ID (#id): 100 mata
• Gaya Sebaris: 1,000 mata
• !penting: Mengatasi segala-galanya

Menguasai kekhususan membolehkan anda menulis CSS yang bersih dan boleh diselenggara, menyelamatkan anda daripada penyahpepijatan yang tidak berkesudahan. Lain kali gaya anda tidak berkelakuan, anda akan tahu dengan tepat di mana hendak dilihat.

Atas ialah kandungan terperinci Kekhususan CSS Diterangkan: Cara Kawal Gaya Mana Yang Menang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!