Tính đặc hiệu CSS

Tính đặc hiệu là gì?
Nếu có hai hoặc nhiều quy tắc CSS xung đột trỏ đến cùng một phần tử, trình duyệt sẽ tuân theo một số quy tắc để xác định quy tắc nào là cụ thể nhất và do đó sẽ thắng.

Hãy nghĩ về tính đặc hiệu như một điểm số / thứ hạng xác định khai báo kiểu nào cuối cùng được áp dụng cho một yếu tố.

Bộ chọn phổ quát (*) có độ đặc hiệu thấp, trong khi bộ chọn ID có độ đặc hiệu cao!

Lưu ý: Tính cụ thể là một lý do phổ biến khiến các quy tắc CSS của bạn không áp dụng cho một số thành phần, mặc dù bạn nghĩ rằng chúng nên như vậy.

Tính phân cấp cụ thể
Mỗi bộ chọn có vị trí của nó trong hệ thống phân cấp cụ thể. Có bốn loại xác định mức độ đặc hiệu của bộ chọn:

Inline phong cách - Một phong cách nội tuyến được gắn trực tiếp vào yếu tố để được theo kiểu. Ví dụ: <h1 style = "color: #ffffff;">.

ID - ID là một mã định danh duy nhất cho các thành phần trang, chẳng hạn như #navbar.

Các lớp, thuộc tính và lớp giả - Loại này bao gồm. Class, [thuộc tính] và lớp giả như: hover ,: tập trung, v.v.

Các phần tử và phần tử giả - Danh mục này bao gồm tên phần tử và phần tử giả, chẳng hạn như h1, div ,: trước và sau.

Làm thế nào để tính toán cụ thể?
Ghi nhớ làm thế nào để tính cụ thể!

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 giả lớp, thêm 1 cho mỗi tên thành phần hoặc phần tử giả.

Hãy xem xét ba đoạn mã sau:

Thí dụ
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

Độ đặc hiệu của A là 1 (một yếu tố)
Độ đặc hiệu của B là 101 (một tham chiếu ID và một yếu tố)
Độ đặc hiệu của C là 1000 (kiểu dáng nội tuyến)

Vì 1 <101 <1000, quy tắc thứ ba (C) có mức độ cụ thể cao hơn và do đó sẽ được áp dụng.

Quy tắc cụ thể
Tính đặc hiệu bằng nhau: quy tắc mới nhất được tính - Nếu cùng một quy tắc được viết hai lần vào biểu định kiểu bên ngoài, thì quy tắc thấp hơn trong biểu định kiểu sẽ gần với phần tử được tạo kiểu hơn và do đó sẽ được áp dụng:

Thí dụ
h1 {background-color: yellow;}
h1 {background-color: red;}

quy tắc thứ hai luôn được áp dụng.

Bộ chọn ID có độ đặc hiệu cao hơn bộ chọn thuộc tính - Xem ba dòng mã sau:

Thí dụ
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

quy tắc đầu tiên cụ thể hơn hai quy tắc còn lại và sẽ được áp dụng.

Bộ chọn ngữ cảnh cụ thể hơn bộ chọn phần tử đơn - Biểu định kiểu được nhúng gần với phần tử được tạo kiểu hơn. Vì vậy, trong tình huống sau đây

Thí dụ
From external CSS file:
#content h1 {background-color: red;}

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

quy tắc thứ hai sẽ được áp dụng.

Bộ chọn lớp đánh bại bất kỳ số lượng bộ chọn thành phần nào - bộ chọn lớp như .intro đập h1, p, div, v.v .:

Thí dụ
.intro {background-color: yellow;}
h1 {background-color: red;}

Bộ chọn phổ quát và các giá trị được kế thừa có độ đặc hiệu là 0 - *, thân * và tương tự có độ đặc hiệu bằng không. Các giá trị được kế thừa cũng có độ đặc hiệu bằng 0.