Câu hỏi phỏng vấn CSS
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à cộng dồn điểm số dựa trên các loại bộ chọn:

  • Thêm 100 điểm cho mỗi ID.
  • Thêm 10 điểm cho mỗi class, pseudo-class, hoặc bộ chọn thuộc tính.
  • Thêm 1 điểm cho mỗi bộ chọn phần tử hoặc pseudo-element.

Quy tắc !important

Một ngoại lệ cho quy tắc specificity là sử dụng !important, nó sẽ ghi đè tất cả các quy tắc khác, kể cả inline styles. Tuy nhiên, việc sử dụng !important thường không được khuyến khích vì nó phá vỡ hành vi tự nhiên của bảng kiểu và làm cho việc bảo trì và gỡ lỗi trở nên khó khăn hơn.

Ví dụ

Nếu một phần tử HTML được chỉ định bởi cả bộ chọn ID và bộ chọn class, vì bộ chọn ID có specificity cao hơn, kiểu CSS thuộc về bộ chọn ID sẽ được áp dụng cho phần tử thay vì bộ chọn class.

Khi Các Quy Tắc Có Specificity Bằng Nhau

Nếu các quy tắc CSS có cùng specificity, quy tắc xuất hiện sau cùng trong tài liệu sẽ được áp dụng.

Specificity là một khái niệm quan trọng trong CSS vì nó giúp xác định cách các quy tắc CSS được áp dụng và làm thế nào để ghi đè các quy tắc khi cần thiết. Hiểu rõ về specificity giúp bạn viết CSS một cách hiệu quả hơn và tránh được các vấn đề phức tạp khi các quy tắc CSS xung đột với nhau.

middle

middle

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

middle

:root pseudo-class trong CSS để làm gì?

middle

Làm sao để căn chỉnh nội dung của thẻ <p> nằm ngay trung tâm của thẻ <div> trong CSS?

junior

Bạn biết các đơn vị đo độ dài nào trong CSS và hãy giải thích về chúng?

Bình luận

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

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