Khi nhiều rule có thể tạo style cho một phần tử, hai cơ chế quyết định kết quả: cascade (rule nào thắng) và inheritance (thuộc tính nào truyền xuống từ cha).
Trình duyệt chọn declaration thắng cuộc bằng cách kiểm tra, theo thứ tự ưu tiên:
1. Importance → !important đánh bại declaration thường
2. Specificity → selector cụ thể hơn thắng (id > class > element)
3. Source order → nếu vẫn hòa, rule định nghĩa SAU CÙNG thắng
p { color: blue; } /* specificity 0,0,1 */
.text { color: green; } /* specificity 0,1,0 → thắng rule element */
p { color: red; } /* cùng specificity với rule đầu, nhưng SAU → sẽ thắng blue */
/* kết quả cho <p class="text">: green (class thắng element) */
Một số thuộc tính (chủ yếu liên quan đến text) được kế thừa tự động bởi các phần tử con; hầu hết thì không.
body {
color: #333; /* ✅ được kế thừa — mọi phần tử text con đều nhận */
font-family: serif; /* ✅ được kế thừa */
border: 1px solid; /* ❌ KHÔNG kế thừa — con không có border */
}
Được kế thừa mặc định: color, font-*, line-height, text-align, visibility, cursor. Không kế thừa: border, margin, padding, background, width, height, display.
.child {
color: inherit; /* ép lấy giá trị của cha */
border: initial; /* reset về giá trị mặc định của thuộc tính */
all: unset; /* reset mọi thứ: inherit nếu có thể kế thừa, ngược lại initial */
}
Đây là lý do một rule specificity thấp có thể thua dù được viết sau — specificity được kiểm tra trước source order. Hiểu thứ tự (importance → specificity → source order) giải thích gần như mọi trường hợp "style của tôi không áp dụng."
Cascade và inheritance là mô hình cốt lõi của cách CSS thực sự được giải quyết.
Biết thứ tự ưu tiên giúp debug xung đột, biết thuộc tính nào kế thừa cho phép bạn đặt color/font một lần trên body thay vì khắp nơi, và inherit/initial/unset cho bạn điều khiển chính xác — cùng nhau chúng làm CSS dễ đoán thay vì kỳ bí.