Menyahkod keutamaan/kekhususan pemilih CSS

Question

Saya ingin memahami cara pemilih CSS mengendalikan konflik harta benda. Bagaimana untuk memilih satu hartanah berbanding yang lain?

div {
  background-color: red;
}

div.my_class {
  background-color: black;
}

div#my_id {
  background-color: blue;
}

body div {
  background-color: green;
}

body>div {
  background-color: orange;
}

body>div#my_id {
  background-color: pink;
}

<div id="my_id" class="my_class">hello</div>

Bagaimana keutamaan pemilih berfungsi?

Answer 1

Dalam urutan, 1 ialah kekhususan terendah dan 5 ialah kekhususan tertinggi. https://youtu.be/NqDb9GfMXuo Butiran demo akan dipaparkan.

Answer 2

Saya akan menambah pautan kepada spesifikasi CSS 2.1 itu sendiri dan cara penyemak imbas harus mengira kekhususan:

CSS 2.1 Bahagian 6.4.3:

Jika sifatnya sama, maka CSS 2.1 Bahagian 6.4.1 akan dimainkan:

Sila ambil perhatian bahawa apa yang dibincangkan di sini ialah masa gaya ditakrifkan, bukan masa ia digunakan. Jika kelas .a dan .b mempunyai kekhususan yang sama, yang terakhir ditakrifkan dalam helaian gaya akan diutamakan.

....a 和 .b 具有相同的特异性，则以样式表中最后定义的那个为准。

...

和

...

的样式相同，基于.a和.b

mempunyai gaya yang sama seperti

...

, berdasarkan . a dan .b. 🎜