CSS Cơ Bản - Hướng Dẫn Toàn Diện

/* 0-0-0-1 = 1 điểm */
p { color: black; }

/* 0-0-1-0 = 10 điểm */
.highlight { color: yellow; }

/* 0-1-0-0 = 100 điểm */
#header { color: blue; }

/* 0-0-1-1 = 11 điểm */
p.highlight { color: red; }

/* 0-1-1-1 = 111 điểm */
#main .sidebar p { color: green; }

/* 0-1-2-1 = 121 điểm - THẮNG */
#main .sidebar p.highlight { color: purple; }

/* !important ghi đè MỌI THỨ */
p { color: orange !important; }

/* Kiểm soát inheritance */
.child {
    color: inherit;    /* Kế thừa từ parent */
    margin: initial;   /* Giá trị mặc định của browser */
    padding: unset;    /* Kế thừa nếu có, không thì initial */
    border: revert;    /* Quay về browser default stylesheet */
}

/* Ví dụ thực tế */
body {
    font-family: 'Helvetica', Arial, sans-serif;  /* Tất cả con sẽ kế thừa */
    color: #333;                                   /* Tất cả con sẽ kế thừa */
    line-height: 1.6;                             /* Tất cả con sẽ kế thừa */
}

.special-text {
    font-family: inherit;  /* Giữ font từ body */
    color: red;           /* Override color */
}

/* ❌ Chậm - lồng sâu */
.nav ul li a:hover { }

/* ✅ Nhanh - nhắm trực tiếp */
.nav-link:hover { }

/* ❌ Chậm - bộ chọn toàn bộ */
* { box-sizing: border-box; }

/* ✅ Tốt hơn - reset có mục tiêu */
html, body, div, span, h1, h2, h3, p {
    box-sizing: border-box;
}