Tính độ ưu tiên CSS
Tính và so sánh điểm độ ưu tiên của bộ chọn CSS
Dữ liệu đầu vào và tùy chọn
Mẫu có sẵn và ví dụ
Chạy ngay trong trình duyệt. Dữ liệu bạn nhập vẫn ở trên thiết bị này.
Kết quả
Nhập các giá trị của bạn để xem kết quả.
Giới thiệu công cụ Tính độ ưu tiên CSS miễn phí
Công cụ Tính độ ưu tiên CSS là công cụ miễn phí giúp lập trình viên web hiểu, tính toán và gỡ lỗi độ ưu tiên (specificity) của bộ chọn CSS. Độ ưu tiên là thuật toán trình duyệt dùng để xác định quy tắc CSS nào được áp dụng khi nhiều quy tắc cùng nhắm tới một phần tử. Giá trị này được biểu diễn dưới dạng ba thành phần (a, b, c), mỗi thành phần ứng với một loại trọng số của bộ chọn.
Hiểu rõ độ ưu tiên CSS là một trong những kỹ năng quan trọng nhất của lập trình viên front-end. Khi kiểu dáng không được áp dụng như mong đợi, xung đột độ ưu tiên thường là nguyên nhân gốc. Công cụ này phân tích ngay lập tức mọi bộ chọn CSS thành các thành phần độ ưu tiên, cho bạn thấy chính xác có bao nhiêu bộ chọn ID (a), bộ chọn class/thuộc tính/pseudo-class (b) và bộ chọn phần tử/pseudo-element (c) đóng góp vào điểm số cuối cùng.
Công cụ có chế độ so sánh mạnh mẽ, cho phép đặt hai bộ chọn cạnh nhau để xem bộ chọn nào thắng về độ ưu tiên. Điều này rất hữu ích khi gỡ lỗi xung đột CSS, tái cấu trúc stylesheet hoặc tìm hiểu cách cascade hoạt động. Biểu đồ cột trực quan và bảng phân tích theo màu giúp độ ưu tiên trở nên dễ hiểu, kể cả với lập trình viên mới làm quen với CSS.
Tính năng chính
- Tính độ ưu tiên tức thì cho mọi bộ chọn CSS hợp lệ
- Biểu đồ cột trực quan cho thấy trọng số tương đối của ID, class và phần tử
- Phân tích theo màu cho từng thành phần của bộ chọn (ID màu đỏ, class màu vàng, phần tử màu xanh)
- Chế độ so sánh để đặt hai bộ chọn đối đầu nhau, có chỉ báo bên thắng/bên thua
- Hỗ trợ các bộ chọn phức tạp, gồm pseudo-class, pseudo-element và bộ chọn thuộc tính
- Xử lý đúng quy tắc độ ưu tiên của các pseudo-class :not(), :is() và :where()
- 14 ví dụ có sẵn bao quát các mẫu bộ chọn phổ biến để học nhanh
- Sao chép giá trị độ ưu tiên vào bộ nhớ tạm chỉ với một cú nhấp
- Thẻ tham khảo nhanh tích hợp về các quy tắc độ ưu tiên
- Hỗ trợ chế độ tối để dùng thoải mái trong mọi môi trường
Cách dùng công cụ Tính độ ưu tiên CSS
- Nhập bộ chọn CSS: Gõ hoặc dán bất kỳ bộ chọn CSS nào vào ô nhập. Độ ưu tiên được tính ngay khi bạn gõ.
- Xem phân tích: Xem giá trị độ ưu tiên (a, b, c), biểu đồ cột và bảng phân tích theo màu để hiểu điểm số được tạo thành như thế nào.
- Thử chế độ so sánh: Chuyển sang chế độ so sánh để nhập hai bộ chọn và xem bộ chọn nào có độ ưu tiên cao hơn, với chỉ báo rõ ràng thắng/thua/hòa.
- Dùng ví dụ có sẵn: Nhấp vào một trong 14 bộ chọn có sẵn để xem ngay độ ưu tiên của nó. Ở chế độ so sánh, ví dụ có sẵn sẽ điền vào ô bộ chọn trống đầu tiên.
- Sao chép kết quả: Nhấp nút sao chép cạnh giá trị độ ưu tiên để chép vào bộ nhớ tạm, dùng cho tài liệu hoặc chú thích trong mã.
Trường hợp sử dụng
- Gỡ lỗi xung đột CSS: Xác định vì sao một quy tắc CSS ghi đè quy tắc khác bằng cách so sánh điểm độ ưu tiên và tìm ra bộ chọn thắng.
- Tái cấu trúc stylesheet: Phân tích độ ưu tiên của bộ chọn trong toàn bộ mã nguồn để giảm các bộ chọn quá cụ thể và giúp CSS dễ bảo trì hơn.
- Học về cascade trong CSS: Dùng các bảng phân tích trực quan và ví dụ có sẵn để hình thành cảm nhận trực giác về cách độ ưu tiên hoạt động trong thực tế.
- Review mã: Nhanh chóng kiểm tra độ ưu tiên của bộ chọn khi review mã để tránh "cuộc chiến độ ưu tiên" và giữ cách viết kiểu dáng nhất quán.
- Giảng dạy và workshop: Dùng chế độ so sánh và biểu đồ trực quan làm công cụ minh họa trong workshop CSS, bootcamp và khóa học trực tuyến.
- Lập kế hoạch kiến trúc CSS: Lên chiến lược đặt bộ chọn (BEM, OOCSS, utility-first) bằng cách hiểu tác động của độ ưu tiên trước khi viết mã.
- Tùy biến framework: Tính độ ưu tiên khi ghi đè kiểu dáng của Bootstrap, Tailwind hoặc framework khác để đảm bảo quy tắc tùy chỉnh của bạn được ưu tiên.
Câu hỏi thường gặp
Công cụ này có miễn phí không?
Có, công cụ Tính độ ưu tiên CSS hoàn toàn miễn phí. Không giới hạn lượt dùng, không cần tài khoản và không có gói trả phí. Bạn có thể tính và so sánh bao nhiêu bộ chọn tùy ý.
Dữ liệu của tôi có an toàn không?
Chắc chắn. Mọi phép tính độ ưu tiên đều diễn ra hoàn toàn trong trình duyệt của bạn. Không có bộ chọn CSS hay dữ liệu nào được gửi tới máy chủ. Công cụ hoạt động hoàn toàn ngoại tuyến sau khi đã tải xong.
Độ ưu tiên CSS hoạt động như thế nào?
Độ ưu tiên CSS được tính thành giá trị ba phần (a, b, c). Cột "a" đếm bộ chọn ID (#id), cột "b" đếm bộ chọn class (.class), bộ chọn thuộc tính ([attr]) và pseudo-class (:hover), còn cột "c" đếm bộ chọn kiểu phần tử (div, p) và pseudo-element (::before). Giá trị lớn hơn ở cột đứng trước luôn thắng, bất kể các cột sau.
Còn !important và kiểu nội tuyến thì sao?
Kiểu nội tuyến (inline) ghi đè mọi độ ưu tiên dựa trên bộ chọn, còn !important ghi đè tất cả, kể cả kiểu nội tuyến. Hai trường hợp này nằm ngoài hệ thống độ ưu tiên (a, b, c) và không được công cụ này tính vì chúng không thuộc độ ưu tiên của bộ chọn.
:not() ảnh hưởng đến độ ưu tiên như thế nào?
Bản thân pseudo-class :not() đóng góp độ ưu tiên bằng không, nhưng đối số của nó được tính bình thường. Ví dụ, :not(.active) cộng thêm (0, 1, 0) vì .active là bộ chọn class. Tương tự, :is() lấy độ ưu tiên của đối số cụ thể nhất, còn :where() luôn đóng góp độ ưu tiên bằng không.
Điều gì xảy ra khi hai bộ chọn có độ ưu tiên bằng nhau?
Khi hai bộ chọn có giá trị độ ưu tiên giống hệt nhau, quy tắc cascade của CSS được áp dụng: bộ chọn xuất hiện sau trong mã nguồn sẽ được ưu tiên. Chế độ so sánh sẽ hiển thị chỉ báo "TIE" trong trường hợp này.
Mẹo và thực hành tốt nhất
- Giữ độ ưu tiên thấp: Ưu tiên bộ chọn class hơn bộ chọn ID để độ ưu tiên dễ kiểm soát và kiểu dáng dễ bị ghi đè khi cần.
- Tránh !important: Dùng !important là dấu hiệu của vấn đề về độ ưu tiên. Hãy xử lý nguyên nhân gốc bằng cách điều chỉnh độ ưu tiên của bộ chọn thay vì thêm khai báo !important.
- Dùng BEM hoặc cách đặt tên tương tự: Các phương pháp như BEM (Block Element Modifier) giúp giữ độ ưu tiên phẳng nhờ chủ yếu dựa vào các bộ chọn class đơn.
- Kiểm tra trước khi lồng: Các bộ chọn lồng sâu như #main .content .sidebar .widget p tích lũy độ ưu tiên cao. Hãy dùng công cụ này để kiểm tra trước khi commit.
- Tận dụng :where() để có độ ưu tiên bằng không: Khi viết kiểu tiện ích hoặc reset, hãy bọc bộ chọn trong :where() để chúng dễ dàng bị ghi đè.
- So sánh khi gỡ lỗi: Khi một kiểu dáng không được áp dụng, hãy dùng chế độ so sánh để kiểm tra xem có bộ chọn khác đang thắng về độ ưu tiên hay không.