Lọc khai báo trước khi so ưu tiên
Xét riêng từng thuộc tính như color hoặc background-color. Trước hết kiểm cú pháp hợp lệ, bộ chọn có khớp và điều kiện có thỏa. Các ví dụ dưới đây chỉ dùng CSS do tác giả trang viết như mã đã cho.
Với các quy tắc thông thường cùng mức, so trọng số; nếu bằng nhau thì khai báo viết sau quyết định. Style nội tuyến thông thường ưu tiên hơn các quy tắc bộ chọn thông thường trong những tình huống này. !important đổi mức ưu tiên của **khai báo có gắn nó**, có thể thắng style nội tuyến thông thường; không tự nâng mọi khai báo cùng quy tắc.
Nếu thuộc tính trên con dẫn đến kế thừa, nó nhận giá trị từ cha. Kế thừa khác với một khai báo đặt trực tiếp cho con; không lấy trọng số bộ chọn của cha để so thắng quy tắc riêng trên con.
Khi chưa có CSS riêng, trình duyệt vẫn có cách trình bày mặc định, chẳng hạn tiêu đề thường đậm. Tệp mẫu chưa định dạng giúp đối chiếu phần mặc định ấy với kết quả sau khi thêm CSS.
Màu chữ và nền có thể lấy từ hai nơi
```html
<p style="color:blue; background-color:white;">Một ghi chú ngắn.</p>
```
```css
p {
color: red !important;
background-color: yellow;
}
```
Chữ đỏ vì color:red!important thắng color:blue nội tuyến thông thường trong mẫu. Nền vẫn trắng vì background-color:yellow không có important; nền trắng nội tuyến thông thường được ưu tiên. Phải xét từng thuộc tính, không kết luận toàn bộ khối p thắng style.
Cùng bộ chọn, khai báo sau
```css
.ghi_chu { color: red; }
.ghi_chu { color: navy; }
```
Với p thuộc lớp ghi_chu, hai quy tắc thông thường cùng bộ chọn nên cùng trọng số. Quy tắc sau đặt navy, vì vậy chữ navy; không trộn navy và red.
Con có giá trị đặt riêng
```html
<div id="cha"><p>Màu riêng của đoạn.</p></div>
```
```css
#cha { color: red !important; }
p { color: blue; }
```
p có color:blue đặt trực tiếp nên chữ xanh dương. color:red!important của cha không truyền nguyên quyền ưu tiên important xuống con; không dùng ID của cha để thắng khai báo riêng trên p. Nếu bỏ riêng quy tắc p trong mẫu, p kế thừa màu đỏ từ cha.
Bài luyện
Trong mẫu important, chữ và nền p có màu gì?
color:red có important nên thắng màu chữ nội tuyến thường.
Nền vàng không được gắn important.
Đúng. Xét color và background-color riêng.
Màu chữ đỏ important thắng, nền nội tuyến trắng giữ.
Lời giải
color:red!important thắng color:blue nội tuyến thường nên chữ đỏ. background-color:yellow không có important, còn nền trắng nội tuyến thường được ưu tiên. Kết quả là chữ đỏ trên nền trắng.
Bài luyện
Hai quy tắc .ghi_chu thông thường cùng mức lần lượt đặt đỏ rồi navy. Màu cuối trong mẫu là gì?
Đúng. Các mức trước bằng nhau thì xét thứ tự.
Không có nguyên tắc luôn ưu tiên khai báo đầu.
Không trộn hai khai báo color theo cách này.
Trùng bộ chọn không làm khai báo tự vô hiệu.
Lời giải
Cả hai quy tắc có cùng bộ chọn .ghi_chu và đều thông thường cùng mức. Trọng số bằng nhau, nên color:navy viết sau có hiệu lực.
Bài luyện
Trong mẫu cha đỏ!important và p xanh dương, vì sao p vẫn xanh dương?
ID vẫn còn trong HTML.
color có thể kế thừa khi con không có giá trị đặt riêng như mẫu.
important vẫn có vai trò trong việc chọn khai báo cho chính phần tử.
Đúng. Phân biệt kế thừa và khai báo trực tiếp.
Lời giải
p nhận color:blue từ quy tắc trực tiếp trên p. Màu đỏ của cha có thể được kế thừa khi con không có giá trị riêng trong mẫu; important của cha không tự trở thành một khai báo important đặt trên con.
Đang học