Ketahui lebih lanjut tentang keutamaan dan kekhususan pemilih CSS

Question

Saya ingin memahami cara pemilih CSS berfungsi dalam konflik harta benda. Bagaimanakah satu atribut dipilih berbanding yang lain?

div {
  warna latar belakang: merah;
}

div.my_class {
  warna latar belakang: hitam;
}

div#my_id {
  warna latar belakang: biru;
}

body div {
  warna latar belakang: hijau;
}

badan>div {
  warna latar belakang: oren;
}

badan>div#my_id {
  warna latar belakang: merah jambu;
}

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

Bagaimanakah keutamaan pemilih berfungsi?

Answer 1

Dalam urutan, 1 adalah kekhususan terendah dan 5 adalah yang tertinggi. https://youtu.be/NqDb9GfMXuoButiran akan dipaparkan untuk demonstrasi.

Answer 2

Saya hanya akan menambah pautan di sini kepada spesifikasi CSS 2.1 itu sendiri dan cara pelayar perlu mengira kekhususan:

CSS 2.1 Bahagian 6.4.3:

Jika kekhususan adalah sama, CSS 2.1 Bahagian 6.4.1 akan digunakan :

Sila ambil perhatian bahawa ini dibincangkan apabila gaya ditakrifkan, bukan apabila digunakan. Jika susunan definisi kelas .a和.b的特异性相等，则在样式表中最后定义的类将获胜。<p class="a b">...</p>和<p class="b a">...</p>将根据.a和.b ditetapkan dalam gaya yang sama.