./prontouso.com

TIỆN ÍCH THIẾT KẾ

Tính Điểm Ưu Tiên CSS Specificity

Tính điểm trọng số ưu tiên của bộ chọn CSS theo công thức (ID, Class, Element), làm nổi bật bộ chọn nào sẽ ghi đè thuộc tính và hỗ trợ so sánh hai bộ chọn.

Trạng thái công cụChạy trên trình duyệt của bạn
Xem trước

Dữ liệu đầu vào

Kết quả

Selector A
1-1-1
Selector B (optional, to compare)
0-1-4

A wins

Cách thức hoạt động

  1. Nhập dữ liệu của bạn

    Điền các giá trị cần thiết, dán văn bản hoặc tải lên tệp bạn muốn xử lý.

  2. Xem kết quả tức thì

    Hầu hết các công cụ cập nhật theo thời gian thực khi bạn nhập liệu; một số công cụ sử dụng một nút hành động duy nhất.

  3. Sử dụng kết quả

    Sao chép, tải xuống hoặc chia sẻ kết quả được tạo — bạn luôn có toàn quyền kiểm soát dữ liệu của mình.

Quyền riêng tư & xử lý dữ liệu — Chạy cục bộ 100% trên trình duyệt của bạn. Công cụ này không tải dữ liệu của bạn lên máy chủ.

Tính Điểm Ưu Tiên CSS Specificity là gì?

Enter one or two CSS selectors to see their specificity, shown as ids-classes-types, and which one would win a conflict.

TÌM HIỂU CÁCH HOẠT ĐỘNG CỦA CÔNG CỤ

How CSS specificity is calculated

How it's calculated

IDs count the most, then classes, attribute selectors, and pseudo-classes, then element type selectors and pseudo-elements. Combinators like space, >, and ~ don't affect specificity.

Limitations

  • `:not()`, `:is()`, and `:has()` are each counted as one pseudo-class rather than looking inside their argument.
  • `:where()` always counts as zero, matching the CSS specification.

Worked example

`#main .container p` scores 1 id, 1 class, 1 type (1-1-1), while `nav ul li.active a` scores 0 ids, 1 class, 4 types (0-1-4) — the first selector wins despite matching fewer elements by name.

Specificity example

Weight
IDs - classes/attributes/pseudo-classes - types/pseudo-elements

#app .card button:hover

One ID, two class-level parts, and one type selector gives 1-2-1.

Calculation notes

All calculation runs in your browser; the selectors you enter are never sent anywhere.

Các Câu Hỏi Thường Gặp (FAQ)

Why does a later rule sometimes win even with equal specificity?

When specificity ties, the rule that appears later in the stylesheet (or has higher CSS layer priority) wins.

Does inline style show up here?

No — inline `style` attributes always outrank any selector-based specificity, regardless of what this calculator shows.

Does specificity depend on the order of parts in a selector?

No — only which kinds of selectors appear and how many of each, not the order they're written in.

Does it fully parse :is(), :not(), and :has()?

No. This implementation counts each as one pseudo-class, except :where(), which contributes zero. The full CSS spec looks inside those arguments.

Công Cụ Liên Quan