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 tham khảo cho CSS selectors phổ biến
- 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ả.
Khi nào nên giảm specificity?
Specificity quá cao khiến CSS khó bảo trì vì mỗi lần override phải viết selector dài hơn hoặc dùng !important. Với design system, component library hoặc codebase lớn, nên ưu tiên class selectors rõ ràng, tránh lồng quá sâu theo DOM và hạn chế ID selectors trong CSS. Cách này giúp style dễ tái sử dụng, dễ test và ít phát sinh specificity wars khi nhiều team cùng chỉnh giao diện.
Giới hạn của công cụ tính specificity
Công cụ này phù hợp để so sánh nhanh các selector phổ biến trong quá trình debug. Một số selector hiện đại hoặc tổ hợp phức tạp có thể cần kiểm tra thêm bằng trình duyệt, tài liệu CSS Cascade hoặc DevTools. Khi kết quả trên trang thật khác với dự đoán, hãy kiểm tra thêm thứ tự load CSS, media query, cascade layer, inline style, inheritance và trạng thái !important.
Cách công cụ phân tích selector thành các thành phần
Công cụ dùng regex để đếm từng loại thành phần trong chuỗi selector: trước tiên thay thế các attribute selector dạng [type="text"] thành .attr và pseudo-element dạng ::before thành 'element' để dễ đếm; sau đó đếm số lượng #id bằng pattern #[\w-]+, đếm classes/attributes/pseudo-classes bằng pattern .class hoặc :hover, và đếm elements bằng cách tìm các từ đứng sau khoảng trắng hoặc combinator (>, +, ~). Cách tiếp cận dựa trên regex này xử lý tốt phần lớn selector thường gặp trong thực tế, nhưng không phải là một trình phân tích cú pháp CSS đầy đủ (full CSS parser) nên một số selector rất phức tạp hoặc lồng nhiều lớp :not(), :is(), :where() có thể cho kết quả cần kiểm tra lại thủ công.
Specificity trong :is(), :where() và :has() - những hàm chọn hiện đại
Các pseudo-class chọn logic hiện đại có cách tính specificity khác nhau: :is() và :has() lấy specificity của selector con có specificity CAO NHẤT bên trong ngoặc, trong khi :where() luôn có specificity bằng 0 dù bên trong chứa gì. Ví dụ :is(#header, .nav) sẽ có specificity của #header (0-1-0-0) vì đây là thành phần cao nhất, còn :where(#header, .nav) luôn có specificity 0-0-0-0. Đây là lý do :where() thường được dùng trong CSS reset hoặc design system - để định nghĩa style cơ bản mà không làm tăng specificity, giúp dễ override sau này. Công cụ hiện tại xử lý các hàm này ở mức cơ bản, nên với selector phức tạp dùng :is()/:where()/:has(), bạn nên đối chiếu thêm với tài liệu MDN hoặc test trực tiếp trên trình duyệt.
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.
Hai selector có cùng specificity thì rule nào thắng?
Khi specificity bằng nhau, CSS Cascade quyết định theo thứ tự xuất hiện trong nguồn: rule nào được khai báo SAU trong cùng file hoặc trong file load sau sẽ thắng (source order). Đây là lý do vì sao thứ tự import CSS/link stylesheet trong HTML cũng ảnh hưởng đến kết quả cuối cùng, không chỉ riêng specificity.
:is() và :where() tính specificity khác nhau như thế nào?
:is() lấy specificity của selector con cao nhất bên trong ngoặc, còn :where() luôn có specificity bằng 0-0-0-0 bất kể bên trong chứa selector gì. Vì vậy :where() thường được dùng để viết CSS reset hoặc base style mà không làm tăng độ ưu tiên, giúp dễ override ở tầng CSS khác sau này.
Cascade Layers (@layer) có ảnh hưởng đến specificity không?
@layer không thay đổi cách tính specificity của từng selector, nhưng nó tạo ra một tầng ưu tiên riêng đứng TRƯỚC specificity trong thứ tự xét cascade: rule trong layer khai báo sau sẽ thắng rule trong layer khai báo trước, bất kể specificity, trừ khi có !important (lúc đó thứ tự layer bị đảo ngược cho các khai báo !important).
Combinator như >, +, ~ có tính vào specificity không?
Không. Các combinator (kết hợp) như dấu cách (descendant), > (child), + (adjacent sibling), ~ (general sibling) chỉ mô tả quan hệ giữa các selector, hoàn toàn không đóng góp vào specificity, tương tự universal selector *.
Nên tránh dùng ID selector trong CSS vì lý do gì liên quan specificity?
ID selector có specificity rất cao (0-1-0-0), khiến việc override sau này phải dùng selector phức tạp hơn hoặc !important. Trong codebase lớn hoặc design system, thói quen phổ biến là hạn chế dùng #id để style trực tiếp, ưu tiên class selector để giữ specificity thấp và dễ kiểm soát hơn.
Style trong thẻ <style> có specificity khác gì style trong file .css riêng?
Không khác nhau về specificity - cả hai đều tuân theo cùng quy tắc tính specificity dựa trên selector. Điểm khác biệt duy nhất là thứ tự load: nếu thẻ <style> nằm sau file .css trong HTML, các rule cùng specificity trong đó sẽ thắng theo nguyên tắc source order, không phải do cách khai báo.
Công cụ này có phân tích được CSS Modules hoặc styled-components không?
Công cụ chỉ nhận input là chuỗi CSS selector thuần (ví dụ '.container p'), không đọc hoặc phân tích file CSS Modules, styled-components hay CSS-in-JS. Bạn cần tự lấy selector đã được compile ra (thường xem trong DevTools) rồi dán vào công cụ để tính specificity.
Vì sao nên so sánh nhiều selector cùng lúc thay vì tính từng cái?
So sánh cùng lúc giúp bạn thấy ngay selector nào sẽ thắng khi có xung đột thực tế trên cùng một element, thay vì phải tự nhớ và so sánh thủ công từng con số specificity. Tính năng sắp xếp tự động từ cao đến thấp của công cụ mô phỏng đúng thứ tự ưu tiên mà trình duyệt áp dụng khi nhiều rule cùng target một phần tử.
Từ khóa liên quan
- css specificity
- specificity calculator
- css selector priority
- css cascade
- selector specificity
- css priority calculator
- tính độ ưu tiên css
- css specificity rules
- calculate css specificity
- css selector weight
- css specificity calculator online
- debug css không hoạt động
- important vs specificity
- css cascade layers specificity
- so sánh css selector
- css specificity chart
- css selector conflict
- học css specificity
