Ưu tiên của bộ chọn phần tử con trong CSS

Trong tất cả các bài học trước, tất cả các bộ chọn phải bắt chính phần tử đó. Có thể xảy ra trường hợp một bộ chọn bắt phần tử, còn bộ chọn thứ hai bắt phần tử cha của phần tử đó.

Bạn đã biết rằng nếu phần tử cha được đặt, ví dụ, màu sắc, thì màu sắc này sẽ được kế thừa bởi phần tử con. Nhưng, nếu phần tử con cũng được đặt màu sắc, thì bộ chọn của phần tử con sẽ có ưu tiên cao hơn so với bộ chọn của phần tử cha.

Điều này có nghĩa là bộ chọn thẻ phần tử con chiến thắng lớp của phần tử cha:

<div class="block">
	<p>text</p>
</div>

.block {
	color: red;
}
p {
	color: green; /* màu này sẽ được áp dụng */
}

Bộ chọn thẻ phần tử con cũng chiến thắng định danh (id) của phần tử cha:

<div id="block">
	<p class="text">text</p>
</div>

#block {
	color: red;
}
.text {
	color: green; /* màu này sẽ được áp dụng */
}