Hai quy tắc cùng đặt màu
Một đoạn văn khớp nhiều bộ chọn, nhưng chỉ có một màu chữ cuối cùng. Ta lọc những khai báo hợp lệ và cùng tác động lên phần tử, rồi xét điều kiện ưu tiên.
Xét từng thuộc tính
Trong các bài dưới đây, CSS do người viết trang khai báo, cùng lớp cascade, không có hoạt ảnh/chuyển tiếp và không có quy tắc từ nguồn khác. Với các quy tắc thông thường cùng mức, so độ đặc hiệu: số id trước, rồi số class/thuộc tính/lớp giả, rồi số tên phần tử/phần tử giả. So từng nhóm từ trái sang phải, không cộng thành một số thập phân. Nếu bằng nhau, khai báo xuất hiện sau có ưu tiên.
Style trực tiếp thông thường ưu tiên hơn các quy tắc thông thường bằng bộ chọn. Khai báo !important có mức ưu tiên khác và có thể thắng style trực tiếp thông thường; không kết luận style trực tiếp luôn thắng mọi trường hợp.
Kế thừa là nhận giá trị từ cha với những thuộc tính có kế thừa như color; không phải mọi thuộc tính đều kế thừa. Khai báo trực tiếp hợp lệ trên con không phải so độ đặc hiệu với bộ chọn của cha để nhận màu.
Xét độ đặc hiệu
```html
<p id="loi-nhac" class="note">Đọc kĩ đề.</p>
```
```css
#loi-nhac { color: red; }
p.note { color: blue; }
```
Cả hai đặt color trực tiếp cho p. Bộ chọn có id ưu tiên hơn bộ chọn có class trong điều kiện đã nêu, nên chữ đỏ dù quy tắc p.note viết sau.
Thử vận dụng
Hai quy tắc cùng bộ chọn .note lần lượt đặt color: red rồi color: blue; đều thông thường, cùng lớp và đều hợp lệ. Màu cuối là gì?
Màu đỏ bị khai báo cùng mức viết sau thay thế.
Đúng: khi cùng mức, xét thứ tự xuất hiện.
CSS không trộn hai khai báo color theo cách này.
Vẫn có giá trị color hợp lệ.
Lời giải
Độ đặc hiệu và các mức trước đó bằng nhau; khai báo sau quyết định nên màu xanh dương.
Con có khai báo riêng
```css
#khung { color: red; }
p { color: blue; }
```
Nếu p nằm trong phần tử #khung, p vẫn có màu xanh vì có color riêng. Màu đỏ của cha chỉ được kế thừa khi cách xác định giá trị trên con dẫn đến kế thừa; không dùng số id của cha để thắng quy tắc trực tiếp trên p.
Ví dụ xem cách làm
Một quy tắc .note đặt color: red !important, còn phần tử có style="color: blue" thông thường. Trong điều kiện của bài, màu nào có hiệu lực?
Lời giải
Màu đỏ: khai báo important thắng khai báo trực tiếp thông thường. Ta xét mức quan trọng trước khi áp dụng cách so các quy tắc thông thường.
Ví dụ xem cách làm
Một quy tắc đặt font-size: 18 bị bỏ qua nhưng color: blue cùng quy tắc vẫn có hiệu lực. Có hợp lí không?
Lời giải
Có. 18 thiếu đơn vị cho cỡ chữ ở trường hợp này nên khai báo đó không hợp lệ; khai báo color hợp lệ vẫn có thể áp dụng. Sửa thành 18px nếu mục tiêu là 18 pixel.
Những điều cần nhớ
Kiểm bộ chọn và cú pháp trước, rồi xét mức quan trọng, độ đặc hiệu và thứ tự trong đúng điều kiện. Phân biệt giá trị kế thừa với khai báo trực tiếp trên phần tử.
Đang học