Giải thích khái niệm specificity
trong CSS?
Giải thích khái niệm specificity
trong CSS?
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.
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:
style
của phần tử HTML, có giá trị specificity
là 1,000 điểm.#navbar
, có giá trị specificity
là 100 điểm cho mỗi ID..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.p
, ::before
, có giá trị specificity
là 1 điểm cho mỗi phần tử hoặc pseudo-element.Để 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:
!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.
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.
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
Gợi ý câu hỏi phỏng vấn
Chưa có bình luận nào