Quy tắc Specificity trong CSS

Trong ví dụ trước, cả hai bộ chọn đều giống nhau và có cùng mức độ ưu tiên. Điều này có nghĩa là thuộc tính nào được viết phía dưới sẽ được áp dụng.

Cũng có những tình huống khi một phần tử trang phù hợp với nhiều bộ chọn. Trong trường hợp này, khi có xung đột thuộc tính, bộ chọn specificity cao hơn sẽ thắng, tức là bộ chọn chính xác hơn. Hãy cùng xem xét các quy tắc specificity.

Quy tắc thứ nhất

Lớp (class) luôn thắng bộ chọn thẻ (tag):

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

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

Quy tắc thứ hai

Định danh (ID) luôn thắng lớp (class):

<p id="elem" class="text">text</p>

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

Quy tắc thứ ba

Trong điều kiện ngang bằng, bộ chọn nào có nhiều phần hơn sẽ thắng. Ví dụ, nếu chúng ta có hai bộ chọn thẻ, bộ chọn nào có nhiều thẻ hơn sẽ thắng:

<div>
	<p>text</p>
</div>

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

Nếu là hai bộ chọn lớp, bộ chọn nào chỉ định nhiều lớp hơn sẽ thắng (nếu trong đó có các bộ chọn thẻ, chúng không ảnh hưởng):

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

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