Ketahui lebih lanjut tentang keutamaan dan kekhususan pemilih CSS
P粉036800074
2023-08-22 22:06:31
<p>Saya ingin memahami cara pemilih CSS berfungsi dalam konflik harta benda. Bagaimanakah satu atribut dipilih berbanding yang lain? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">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;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="my_id" class="my_class">hello</div></pre>
<p><br /></p>
<p>Bagaimanakah keutamaan pemilih berfungsi? </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dalam urutan, 1 adalah kekhususan terendah dan 5 adalah yang tertinggi. https://youtu.be/NqDb9GfMXuoButiran akan dipaparkan untuk demonstrasi.
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和.bditetapkan dalam gaya yang sama.