CSS 29 – Specificity trong CSS

0
94

Specificity là gì ?

Chúng ta sẽ đi tới một ví dụ để có thể dễ dàng hình dung hơn. Giả sử chúng ta có đoạn code sau đây:

Ở đoạn code trên, phần xét background cho thẻ <div> đã cùng lúc bị xét 2 lần ở cả tên thẻ là div với background là màu xanh và id main với background là cam và cùng xem kết quả:

Vậy những gì đã xảy ra ở trên đã cho ta thấy Specificity là như thế nào. Nếu có 2 hoặc nhiều hơn “CSS rules” cùng nhắm vào một thành phần, 1 thẻ nào đó thì khi đó trình duyệt sẽ tuân theo một nguyên tắc, đó là cách giải thích specificity đơn giản và để mọi người đều dễ dàng hiểu được nó là gì.

Nguyên tắc Specificity

Ở đây chúng ta sẽ có bảng xếp hạng cho CSS rule để trình duyệt tuân theo khi apply CSS, theo thứ tự từ trên xuống dưới.

  • inline-style: Đây là lúc mà chúng ta style cho element mà ta muốn vào thằng dòng đó như thế này, cách này còn hay gọi là CSS nội tuyến.
    VD:<div id=”main” style=”background: lightblue;”></div> Với cách này, nó sẽ apply vào element đó theo những gì mà chúng ta đã style trên dòng đó và mặc kệ nó bên file CSS hay trên phần style ở head chúng ta đã quy định cho nó như thế nào. Ngoại trừ trường hợp của !important chúng ta sẽ nói sau.
  • ID: tiếp sau là ID, nếu không có inline-style thì mọi thành phần đều nhận CSS của ID bạn dùng.
  • Class, attributes và pseudo-classes: Tiếp theo ID ở trên chúng ta sẽ có nhóm thứ 3 bao gồm: class, thuộc tính ([attribute nào đó]) và các pseudo-classes như :hover:focus, …
  • Elemen và pseudo-elements: Cuối cùng là nhóm gồm: các element như h1 li,.. và các pseudo-elements như ::before::after, …

Và đó là thứ tự mà trình duyệt dựa vào khi gặp nhiều CSS rules trỏ vào một element.

Tính toán giá trị của CSS specificity

Tính toán giá trị của CSS specificity để biết được cái nào là được apply vào element để chúng ta không bị mắc lỗi khi viết CSS.

Giá trị specicficity được tính như sau:

Cho VD:

style=”background: green;”

  • Inline-style: ở đây ta có một inline-style đó là background:#green; cho nên điểm của nó sẽ là 1,0,0,0 (hay 1000)
  • ID: chúng ta có 1 ID main nên điểm của nó sẽ là 0,1,0,0 (hay 100)
  • Element: Ta có một element div tương ứng với điểm 0,0,0,1 (hay 1) không tính div ở trên bởi vì nó thuộc về ID main

Vậy, theo như ta thấy 1 < 100 < 1000 cho nên rõ ràng là CSS background: green; của inline-style sẽ được áp dụng.

Một số quy luật trong CSS

Equal specificity: the latest rule counts

Nếu hai thành phần có giá trị specificity bằng nhau, CSS nào viết sau thì CSS đó được nhận.

VD:

Rõ ràng là giá trị specificity của nó là như nhau (đều là element div) lúc này chúng ta sẽ theo luật trên. Cho nên kết quả hiển nhiên là màu cam #ff9600 rồi.

ID selectors have a higher specificity than attribute selectors

ID selector thì sẽ có giá trị specificity cao hơn so với attribute selector. Ví dụ:

Kết quả sẽ ra màu xanh lightblue.

!Important

Như đã nói lúc phân cấp cho Inline-style thì trên nó vẫn có CSS có quyền cao hơn đó là !important.

VD:

background: lightblue !important;

Sử dụng background: lightblue !important; cho vùng CSS tên thẻ <div> và kết quả hiển thị ra sẽ là màu xanh.

Nhìn qua thì thấy !important quá là hay dùng đúng không nào, tuy nhiên cũng vì lí do đó nên là nó rất dễ bị lạm dụng nếu không hiểu rõ về nó. Vậy nên chúng ta cần tìm hiểu rõ về !important để không bị rơi vào tình trạng lạm dụng nó và giúp code CSS chúng ta sạch sẽ hơn.

Kết luận

Như vậy bài này mình đã giúp các bạn tìm hiểu xong về Specificity trong CSS, rất hay và quan trọng để các bạn hiểu rõ hơn về thứ tự chạy code.

Chúc các bạn học tập tốt!

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