Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS

---

Tất cả các thuộc tính CSS đều có 3 điểm chung cơ bản: kế thừa , khởi tạo và không đặt . Kế thừa và ban đầu đã có từ lâu, nhưng unset là một bổ sung mới. Những gì các giá trị sẽ làm đôi khi có thể gây nhầm lẫn, vì vậy đây là bảng phân tích:

• inherit : Lấy thuộc tính từ phần tử cha.
• ban đầu : Giá trị mặc định cho thuộc tính (mặc định của trình duyệt).
• unset : Hoạt động như kế thừa hoặc viết tắt. Nó sẽ hoạt động như kế thừa nếu giá trị root có giá trị khớp hoặc nếu không nó sẽ hoạt động như ban đầu.

Đây là một ví dụ để làm rõ ràng. Đây là đánh dấu của ta :

<div class="wrapper">
  <p class="one">Snake<p>
  <p class="two">Lizard<p>
  <p class="three">Alligator</p>
  <p>Komodo Dragon</p>
</div>

Và đây là CSS của ta :

.wrapper { color: orange; }

.wrapper p { color: purple; }

p.one { color: inherit; }

p.two { color: initial; }

p.three { color: unset; }

• Snake có màu cam, nó kế thừa từ wrapper div .
• Lizard có màu đen, nó nhận giá trị mặc định ban đầu của trình duyệt.
• Alligator có màu cam, trong trường hợp này không đặt đóng role là kế thừa vì có cá bố mẹ có giá trị khớp.
• Komodo Dragon có màu tím, đoạn văn duy nhất lấy giá trị từ bộ chọn .wrapper p .

---

👉 Một mẹo nhỏ mà không cần đặt là khi kết hợp với tất cả tốc ký, nó sẽ tự động ảnh hưởng đến tất cả các thuộc tính của một bộ chọn. Phần sau bỏ đặt mọi thuộc tính của p phần tử đã chọn:

article p {
  all: unset;
}

---

---

Các tin liên quan

Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
The: not Pseudo-Class trong CSS
2016-07-06
Hàm CSS attr ()
2016-06-20
Radial Gradients trong CSS
2016-06-13
Ngữ pháp tuyến tính trong CSS
2016-06-12
CSS: so khớp () Pseudo-Class
2016-06-02
Giới thiệu ngắn gọn về các biến CSS (Thuộc tính tùy chỉnh)
2016-06-01
Phát hiện tính năng trong CSS với @supports
2016-05-05
Bộ chọn thuộc tính CSS
2016-02-05