CSSMột số thuộc tính CSS tự truyền xuống element con, số còn lại thì không.
css
body { color: #333; font-family: system-ui; }
/* mọi <p>, <span>, <li> bên trong đều nhận — không cần khai báo lại */
.card { border: 1px solid #ddd; padding: 16px; }
/* con của .card KHÔNG có border hay padding */| Kế thừa | Không kế thừa |
|---|---|
color, font-*, line-height, letter-spacing | margin, padding, border, background |
text-align, visibility, cursor, list-style | width, height, display, position |
Quy luật chung: thuộc tính về chữ thì kế thừa, thuộc tính về hộp thì không.
Bốn từ khoá điều khiển:
css
.child {
color: inherit; /* ép lấy của cha, kể cả khi vốn không kế thừa */
border: initial; /* về giá trị mặc định của spec */
margin: unset; /* = inherit nếu thuộc tính kế thừa, ngược lại = initial */
all: revert; /* về giá trị của browser stylesheet */
}Lưu ý: <button>, <input>, <textarea> không kế thừa font từ cha vì browser stylesheet đặt sẵn font riêng.
Reset thủ công là việc gần như dự án nào cũng phải làm:
css
button, input, select, textarea { font: inherit; }