Thắc mắc về class, kế thừa trong HTML,CSS

[haova999 (Võ Anh Hào)]

Em mới bắt đầu học cơ bản về HTML/CSS và đang có thắc mắc về tính kế thừa của nó

Theo em biết ( không biết là đúng ko @@ )là kế thừa trong CSS có nghĩa là 1 element A có một class được bọc trong một element B có một class khác thì class của element A sẽ đc thừa kế toàn bộ thuộc tính từ class của element B.

Vậy đoạn code sau đây
https://codepen.io/haova999/pen/QZZyrX
theo em nghĩ là nó phải hiển thị như thế này

nhưng không phải vậy.

Mấy anh/chị có thể giải thích giúp em vì sao nó lại như vậy và nếu kiến thức của em có sai sót thì mong anh/chị cho em biết cách nó hoạt động được không ạ .
Em cảm ơn anh/chị rất nhiều

[drgnz]

Bởi vì không phải property nào cũng tự động thừa kế. Chỉ một vài như font, color sẽ được thừa kế. Những properties tự động thừa kế được gọi là Inherited properties
Xem những property nào tự động thừa kế tại: https://www.w3.org/TR/CSS21/propidx.html (Có cột Inherited yes là có và bản CSS2.1)
Tổng hợp: https://meiert.com/en/indices/css-properties/ (Bạn phải click vào từng field và xem nó có phải là inherited property hay ko)

Thế nên ở trên color được thừa kế, nhưng border thì không.
Nhưng mà mình muốn nó như mình tưởng tượng thì sao?
Đơn giản là dùng value border: inherit; là xong.

[haova999 (Võ Anh Hào)]

Em hiểu rồi ạ, cảm ơn chị rất nhiều