Đặc tính CSS

Đặc tính là gì?

Nếu có hai hoặc nhiều quy tắc CSS xung đột chỉ đến một yếu tố, trình duyệt sẽ tuân theo một số nguyên tắc để xác định quy tắc cụ thể nhất, và do đó giành chiến thắng.

Xem độ đặc trưng (specificity) như điểm số/đánh giá, có thể xác định cuối cùng sẽ áp dụng những khai báo樣式 nào cho yếu tố.

Chọn器 chung (* ) có độ đặc trưng thấp hơn, trong khi chọn器 ID có độ đặc trưng cao hơn!

Lưu ý:Đặc tính này là nguyên nhân phổ biến của việc các quy tắc CSS không áp dụng cho một số yếu tố, mặc dù bạn có thể nghĩ rằng nó nên áp dụng.

Cấu trúc đặc tính

Mỗi chọn tử trong cấu trúc đặc tính đều có vị trí riêng. Dưới đây là bốn loại xác định mức độ đặc tính của chọn tử:

Kiểu nội tuyến - Kiểu nội tuyến (inline) trực tiếp được gắn vào phần tử cần định dạng样式. Ví dụ: <h1 style="màu: #ffffff;">.

ID - ID là标识符 duy nhất của phần tử trang, chẳng hạn như #navbar.

Lớp, thuộc tính và pseudo-class - Loại này bao gồm .classes, [attributes] và pseudo-class, chẳng hạn như :hover, :focus.

Phần tử và pseudo-element - Loại này bao gồm tên phần tử và pseudo-element, chẳng hạn như h1, div, :before và :after.

Làm thế nào để tính đặc tính?

Hãy nhớ kỹ cách tính đặc tính!

Bắt đầu từ 0, thêm 1000 cho thuộc tính style, thêm 100 cho mỗi ID, thêm 10 cho mỗi thuộc tính, lớp hoặc pseudo-class, thêm 1 cho mỗi tên phần tử hoặc pseudo-element.

Hãy suy nghĩ về ba đoạn mã sau:

Mô Hình

A: h1
B: #content h1
C: <div id="content"><h1 style="màu: #ffffff">Tiêu đề</h1></div>
  • Đặc tính của A là 1 (một phần tử)
  • Đặc tính của B là 101 (một ID và một phần tử)
  • Đặc tính của C là 1000 (kiểu nội tuyến)

Vì 1 < 101 < 1000, nên nguyên tắc thứ ba (C) có đặc tính cao hơn, vì vậy sẽ được áp dụng.

Nguyên tắc đặc tính 1:

Trong trường hợp đặc tính giống nhau: nguyên tắc mới nhất rất quan trọng - Nếu ghi lại cùng một nguyên tắc hai lần trong tệp CSS bên ngoài, thì nguyên tắc sau cùng trong tệp sẽ gần hơn với phần tử cần định dạng样式, vì vậy sẽ được áp dụng:

Mô Hình

h1 {màu nền: vàng;}
h1 {background-color: red;}

Thử Nghiệm Trực Tiếp

Nguyên tắc sau luôn được áp dụng.

Nguyên tắc đặc tính 2:

Chọn tử ID rõ ràng hơn so với chọn tử thuộc tính - Hãy xem ba dòng mã sau:

Mô Hình

div#a {màu nền: xanh lục;}
#a {màu nền: vàng;}
div[id=a] {màu nền: xanh dương;}

Thử Nghiệm Trực Tiếp

Nguyên tắc đầu tiên rõ ràng hơn hai nguyên tắc còn lại, vì vậy sẽ được áp dụng.

Nguyên tắc đặc tính 3:

Chọn tử ngữ cảnh rõ ràng hơn so với chọn tử phần tử đơn lẻ - Tập tin CSS gắn kết gần hơn với phần tử cần định dạng样式. Vậy trong các trường hợp sau:

Mô Hình

Đến từ tệp CSS bên ngoài:

#content h1 {màu nền: đỏ;}

Trong Tệp HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

Sẽ Áp Dụng Quy Tắc Tiếp Theo.

Ngữ Luật Đặc Tính 4:

Chọn Thử Loại sẽ đánh bại bất kỳ số lượng yếu tố chọn nào - Chọn Thử Loại (ví dụ: .intro sẽ đánh bại h1, p, div, v.v.):

Mô Hình

.intro {background-color: yellow;}
h1 {background-color: red;}

Thử Nghiệm Trực Tiếp

Ngoài ra,Chọn Thử Của Chọn Thường Quan và Giá Trị Di Truyền Cũng Là 0 - Đặc Tính Của * và body *, và các yếu tố tương tự có đặc tính là 0. Đặc tính di truyền cũng là 0.