CSS độ ưu tiên

0
5

Độ ưu tiên

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 ưu tiên nhất

Hãy coi độ ưu tiên như một điểm số (xếp hạng) xác định những kiểu nào cuối cùng được áp dụng cho một phần tử.

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

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

Cấp bậc ưu tiên

Mỗi bộ chọn đều có vị trí trong hệ thống phân cấp tính cụ thể. Có bốn danh mục xác định mức độ ưu tiên của một bộ chọn:

Inline styles – Kiểu Inline styles được gắn trực tiếp vào phần tử cần tạo kiểu.

IDs– ID là một số nhận dạng duy nhất cho các phần tử trang, chẳng hạn như #navbar.

Classes, attributes and pseudo-classes – Danh mục này bao gồm lớp .class, [thuộc tính] và lớp giả như: hover,: focus, v.v.

Elements and pseudo-elements – 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,: before và: after.

Cách sử dụng

Ghi nhớ cách tính độ ưu tiên!

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

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

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

Độ ưu tiên của A là 1 (một phần tử)
Độ ưu tiên của B là 101 (một tham chiếu ID và một phần tử)
Độ ưu tiênu của C là 1000 (inline styling)

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

Quy tắc

Độ ưu tiên bằng nhau: cái 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 gần với phần tử được định kiểu hơn và do đó sẽ được áp dụng:

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

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

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

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 theo ngữ cảnh cụ thể hơn bộ chọn phần tử đơn lẻ – Biểu định kiểu được nhúng gần với phần tử cần tạo kiểu hơn. Vì vậy, trong tình huống sau

Từ tệp CSS bên ngoài:
#content h1 {background-color: red;}

Trong tệp HTML:
<style>
#content h1 {
  background-color: yellow;
}
</style>

quy tắc sau sẽ được áp dụng.

Một class ưu tiên hơn bất kỳ số lượng bộ chọn phần tử nào – một class chẳng hạn như .intro ưu tiên hơn h1, p, div, v.v.:

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

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

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây