Tính trọng số của từng bộ chọn CSS

```html <p class="ghi_chu">Một ghi chú ngắn.</p> ``` ```css .ghi_chu { color: green; } p { color: red; } ``` .ghi_chu có nhóm đếm (0 ID, 1 lớp, 0 tên phần tử), ghi gọn 10 trong ví dụ. p có (0,0,1), ghi gọn 1. Cả hai là quy tắc thông thường trong cùng khối style đang xét, nên .ghi_chu đặt màu green cho đoạn dù p viết sau. | Bộ chọn | Đếm (ID, lớp, tên phần tử) | Ghi gọn trong ví dụ | |---|---|---| | p > em |(0,0,2)|2| | .ghi_chu #loi_nhac |(1,1,0)|110| | p.ghi_chu em.them |(0,2,2)|22| | p > em#tu_khoa |(1,0,2)|102| .ghi_chu là lớp tự đặt; :hover mới là lớp giả. Cả hai thuộc cùng nhóm đóng góp, nhưng khác cách chọn.

```html <h1 class="ghi_chu">A</h1> <h2 class="ghi_chu">B</h2> <h3 class="ghi_chu">C</h3> <h4><span id="moi">D</span></h4> ``` ```css .ghi_chu { color: blue; } h1, h2, h3, h4 > #moi { color: red; } ``` Danh sách h1, h2, h3, h4 > #moi gồm bốn bộ chọn độc lập. h1, h2, h3 đều có trọng số ghi gọn 1; h4 > #moi có một ID và một tên phần tử, ghi gọn 101. Không cộng bốn phần thành 104 rồi áp cho mọi phần tử. Trong mẫu, A, B, C vẫn xanh dương bởi lớp .ghi_chu có ưu tiên hơn từng tên thẻ. D được chọn bởi h4 > #moi nên nhận màu đỏ.