Câu hỏi

Giải thích khái niệm specificity trong CSS?

Câu trả lời

Trong CSS, specificity là một hệ thống xếp hạng hoặc điểm số xác định quy tắc kiểu nào sẽ được áp dụng cho một phần tử khi có nhiều quy tắc CSS cùng chỉ đến phần tử đó. Nếu có hai hoặc nhiều quy tắc CSS cùng áp dụng cho cùng một phần tử, quy tắc có giá trị specificity cao nhất sẽ "chiến thắng" và được áp dụng.

Specificity Hierarchy (Thứ tự ưu tiên)

Mỗi bộ chọn CSS có một vị trí trong thứ tự ưu tiên specificity dựa trên bốn danh mục sau:

  1. Inline styles: Áp dụng trực tiếp trên thuộc tính style của phần tử HTML, có giá trị specificity là 1,000 điểm.
  2. IDs: Bộ chọn dựa trên ID, ví dụ #navbar, có giá trị specificity là 100 điểm cho mỗi ID.
  3. Classes, pseudo-classes, attribute selectors: Bộ chọn dựa trên class, pseudo-class, hoặc bộ chọn thuộc tính, ví dụ .test, :hover, [href], có giá trị specificity là 10 điểm cho mỗi class, pseudo-class, hoặc bộ chọn thuộc tính.
  4. Elements and pseudo-elements: Bộ chọn dựa trên loại phần tử hoặc pseudo-element, ví dụ p, ::before, có giá trị specificity là 1 điểm cho mỗi phần tử hoặc pseudo-element.

Cách Tính Specificity

Để tính specificity, bạn bắt đầu từ 0 và...

Bạn cần đăng nhập để xem
middle

middle

Gợi ý câu hỏi phỏng vấn

middle

Sự khác biệt giữa nth-child()nth-of-type() trong CSS là gì?

expert

DOM là gì và cách nó liên kết với CSS như thế nào?

middle

Thuộc tính float trong CSS thường dùng để làm gì?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào