Spesifisitas CSS

Apakah itu kesukaran?

Jika terdapat dua atau lebih aturan CSS yang konflik mengarah ke elemen yang sama, pelayar akan mengikuti beberapa prinsip untuk menentukan yang paling spesifik, dan kemenangan.

Lihat kesukaran (specificity) sebagai skor/tingkat, dapat menentukan mana yang akan diaplikasikan terakhir ke dalam style yang digunakan untuk elemen.

Pemilih umum (*) mempunyai kesukaran yang rendah, manakala pemilih ID mempunyai kesukaran yang tinggi!

Perhatian:Kesukaran ini adalah sebab biasa untuk aturan CSS tidak berlaku untuk beberapa elemen, walaupun anda mungkin berpikir seharusnya ia berlaku.

Hirarki kehadiran

Setiap pemilih memiliki posisinya sendiri dalam hierarki kehadiran. Empat kategori berikut menentukan tingkat kehadiran pemilih:

Gaya dalam baris - Gaya dalam baris (inline) disisipkan langsung ke elemen yang disesuaikan. Contoh: <h1 style="color: #ffffff;">.

ID - ID adalah penanda unik bagi elemen halaman, seperti #navbar.

Kelas, atribut dan pseudo-kelas - Kategori ini termasuk .classes, [attributes] dan pseudo-kelas, seperti :hover, :focus dan sebagainya.

Elemen dan pseudo-element - Kategori ini termasuk nama elemen dan pseudo-element, seperti h1, div, :before dan :after.

Bagaimana cara menghitung kehadiran?

Ingatlah cara menghitung kehadiran!

Dari 0, tambahkan 1000 untuk atribut style, tambahkan 100 untuk setiap ID, tambahkan 10 untuk setiap atribut, kelas atau pseudo-kelas, dan tambahkan 1 untuk setiap nama elemen atau pseudo-element.

Pikirkan tiga bagian kode di bawah ini：

Contoh

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • Kehadiran A adalah 1 (satu elemen)
  • Kehadiran B adalah 101 (satu ID yang di referensikan dan satu elemen)
  • Kehadiran C adalah 1000 (gaya dalam baris)

Karena 1 < 101 < 1000, jadi aturan ketiga (C) memiliki kehadiran yang lebih tinggi, jadi akan digunakan.

Atur kehadiran 1:

Dalam keadaan kehadiran yang sama: aturan yang paling baru penting - Jika aturan yang sama ditulis dua kali di dalam fail gaya luaran, aturan yang di tulis terakhir akan lebih dekat dengan elemen yang disesuaikan, jadi akan digunakan：

Contoh

h1 {background-color: yellow;}
h1 {background-color: red;}

Cuba sendiri

Aturan yang di tulis terakhir selalu digunakan.

Atur kehadiran 2:

Pemilih ID lebih tinggi daripada pemilih atribut - Lihat tiga baris kode di bawah ini：

Contoh

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Cuba sendiri

Aturan pertama lebih spesifik daripada dua aturan lain, jadi akan digunakan.

Atur kehadiran 3:

Pemilih konteks lebih spesifik daripada pemilih elemen tunggal - Lainnya, gaya yang disisipkan lebih dekat dengan elemen yang disesuaikan. Jadi dalam keadaan berikut：

Contoh

Dari fail CSS luaran：

#content h1 {background-color: red;}

Dalam fail HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

Akan digunakan untuk atur yang berikutnya.

Atur Spesifisiti 4:

Pemilih Klas akan mengalahkan bilangan mana-mana pemilih elemen - Pemilih Klas (seperti .intro akan mengalahkan h1, p, div dll):

Contoh

.intro {background-color: yellow;}
h1 {background-color: red;}

Cuba sendiri

Selain itu,Pemilih Umum serta nilai yang diserahkan mempunyai 0 - Spesifisiti * *, body * dan yang lainnya mempunyai spesifisiti 0. Spesifisiti nilai yang diserahkan juga 0.