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?

P粉852114752 · Answer

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

P粉384366923 · Answer

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.