ToolHub
Mở công cụ

Máy tính độ ưu tiên CSS

Tính toán và so sánh điểm độ ưu tiên của bộ chọn CSS, phân tích trực quan

Công cụ nhà phát triển
Khởi chạy công cụ Tất cả công cụ

Về công cụ này

Máy tính độ ưu tiên CSS cho phép bạn nhập bất kỳ bộ chọn CSS nào và xem ngay điểm độ ưu tiên của nó, được phân tích thành ba chiều: ID, class và element. Hỗ trợ so sánh song song hai bộ chọn, tự động phát hiện bên thắng về độ ưu tiên, cùng với các ví dụ bộ chọn phổ biến và tham khảo quy tắc độ ưu tiên.

Tính năng chính

Xem nhanh

Tình huống sử dụng

css specificity selector

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

Độ ưu tiên CSS là gì?

Độ ưu tiên CSS là một hệ thống tính điểm được sử dụng để xác định quy tắc CSS nào sẽ có hiệu lực khi nhiều bộ chọn cùng nhắm đến một phần tử. Nó tính trọng số dựa trên loại bộ chọn: bộ chọn ID có trọng số cao nhất, tiếp theo là bộ chọn class và thuộc tính, cuối cùng là bộ chọn element.

Độ ưu tiên được tính như thế nào?

Độ ưu tiên được tính dưới dạng điểm ba phần (ID, class, element). Mỗi bộ chọn ID cộng 1 vào cột ID, mỗi bộ chọn class, thuộc tính hoặc pseudo-class cộng 1 vào cột class, mỗi bộ chọn element hoặc pseudo-element cộng 1 vào cột element.

!important có ghi đè độ ưu tiên không?

Có, khai báo !important sẽ ghi đè tất cả các tính toán độ ưu tiên thông thường. Khi nhiều quy tắc !important xung đột, quy tắc có độ ưu tiên cao hơn sẽ có hiệu lực. Kiểu nội tuyến cũng ghi đè tất cả độ ưu tiên dựa trên bộ chọn.

Có thể so sánh song song hai bộ chọn không?

Có, công cụ cung cấp bảng so sánh song song, bạn có thể nhập hai bộ chọn và xem ngay bộ chọn nào có độ ưu tiên cao hơn. Đánh dấu bên thắng sẽ tự động hiển thị bên cạnh bộ chọn có điểm cao hơn.

Máy tính hỗ trợ những loại bộ chọn nào?

Máy tính hỗ trợ bộ chọn ID, bộ chọn class, bộ chọn thuộc tính, bộ chọn pseudo-class (như :hover và :nth-child), bộ chọn element và bộ chọn pseudo-element (như ::before và ::after). Cũng cung cấp các ví dụ phổ biến, nhấp để điền.

Công cụ liên quan

Trình kiểm tra JSONBảng chọn màuTrình tạo HashTrình tạo UUID