CSS Specificity Calculator

Tính toán và so sánh độ ưu tiên CSS selectors

CSS Selectors

Kết quả (cao → thấp)

Specificity: (inline, IDs, Classes/Attributes/Pseudo-classes, Elements/Pseudo-elements)

Nhấn "Tính & Sắp xếp" để xem kết quả

CSS Specificity Calculator Online - Tính độ ưu tiên CSS Selector miễn phí

Công cụ CSS Specificity Calculator giúp bạn tính toán và so sánh độ ưu tiên (specificity) của các CSS selectors. Hiểu specificity là chìa khóa để debug CSS conflicts và viết CSS hiệu quả. Công cụ phân tích selector thành 4 thành phần: Inline styles (cao nhất), IDs (#id), Classes/Attributes/Pseudo-classes (.class, [attr], :hover), và Elements/Pseudo-elements (div, ::before). Nhập nhiều selectors cùng lúc để so sánh và sắp xếp từ cao đến thấp. Đặc biệt hữu ích khi debug tại sao CSS rule không được áp dụng, hoặc khi cần override styles mà không dùng !important.

Tính năng nổi bật

Tính specificity chính xác theo chuẩn W3C

Phân tích thành 4 thành phần: Inline, IDs, Classes, Elements

So sánh nhiều selectors cùng lúc

Sắp xếp tự động từ specificity cao đến thấp

Highlight selector có specificity cao nhất

Hiển thị chi tiết số lượng từng loại selector

Hỗ trợ pseudo-classes (:hover, :nth-child) và pseudo-elements (::before)

Xử lý :not() và các complex selectors

Thêm/xóa selectors dễ dàng

Giải thích trực quan với màu sắc

Tại sao cần hiểu CSS Specificity?

CSS Specificity quyết định rule nào được áp dụng khi có nhiều rules cùng target một element. Đây là nguyên nhân phổ biến nhất khiến CSS 'không hoạt động' dù bạn đã viết đúng. Ví dụ: '#header .nav a' có specificity 0-1-1-1 sẽ override '.nav a' có specificity 0-0-1-1. Hiểu specificity giúp bạn: (1) Debug tại sao styles không được áp dụng; (2) Viết CSS có thể override được mà không cần !important; (3) Tổ chức CSS architecture tốt hơn (BEM, OOCSS); (4) Tránh specificity wars trong large codebases. Công cụ này giúp bạn visualize và so sánh specificity một cách trực quan.

Lợi ích khi sử dụng

•Debug CSS conflicts nhanh chóng
•Hiểu tại sao rule không được áp dụng
•Tránh lạm dụng !important
•Viết CSS maintainable hơn
•Học CSS specificity qua ví dụ thực tế
•So sánh nhiều selectors cùng lúc

Hướng dẫn sử dụng CSS Specificity Calculator

1Nhập các CSS selectors bạn muốn so sánh vào các ô input
2Nhấn nút '+' để thêm selector mới nếu cần
3Nhấn 'Tính & Sắp xếp' để tính specificity và sắp xếp
4Xem kết quả với selector có specificity cao nhất được highlight màu xanh
5Đọc chi tiết số lượng IDs, Classes, Elements của từng selector
6Điều chỉnh selectors và tính lại để tìm cách override hiệu quả

Cách tính CSS Specificity

Specificity được tính theo 4 cấp độ (a-b-c-d): (a) Inline styles - style attribute trực tiếp trên element, luôn thắng; (b) IDs - mỗi #id selector cộng 1; (c) Classes, Attributes, Pseudo-classes - mỗi .class, [attr], :hover cộng 1; (d) Elements, Pseudo-elements - mỗi tag name (div, p) và ::before cộng 1. So sánh từ trái sang phải: 0-1-0-0 > 0-0-10-10. Lưu ý: !important không phải specificity, nó là một flag riêng có độ ưu tiên cao hơn tất cả.

Câu hỏi thường gặp (FAQ)

Specificity của * (universal selector) là bao nhiêu?

Universal selector (*) có specificity là 0-0-0-0, không đóng góp vào specificity. Tương tự với combinators (+, >, ~, space) và :not() wrapper (nhưng nội dung bên trong :not() vẫn được tính).

!important có phải là specificity không?

Không. !important là một flag riêng, không phải specificity. Rule có !important sẽ thắng mọi rule không có !important, bất kể specificity. Khi cả hai đều có !important, specificity mới được so sánh.

Inline styles có specificity bao nhiêu?

Inline styles (style attribute) có specificity 1-0-0-0, cao hơn mọi selector trong stylesheet. Chỉ có !important mới override được inline styles.

:nth-child() và :not() được tính như thế nào?

:nth-child(), :nth-of-type() được tính như pseudo-class (cộng vào cột c). :not() bản thân không được tính, nhưng selector bên trong nó được tính bình thường.

Từ khóa liên quan

css specificityspecificity calculatorcss selector prioritycss cascadeselector specificitycss priority calculatortính độ ưu tiên csscss specificity rulescalculate css specificitycss selector weight

Hợp tác ngay với Tấn Phát Digital

Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.