Bạn đã bao giờ thử ghi đè một quy tắc CSS, chỉ để thấy nó không hoạt động như bình thường? Hoặc nhận thấy khi một yếu tố được nhắm mục tiêu nhiều lần với các kết hợp bộ chọn CSS khác nhau, mỗi lần chỉ có một quy tắc được áp dụng? Đây là tất cả vì các quy tắc cụ thể CSS. Các quy tắc cụ thể CSS có thể là một trong những khái niệm khó hiểu nhất, đặc biệt là cho người mới bắt đầu. Nếu bạn chỉ mới bắt đầu với CSS, như một quy tắc đặt hàng tiêu chuẩn, bạn có thể nghĩ rằng quy tắc CSS mới nhất sẽ ghi đè lên quy tắc cũ. Điều này có vẻ đơn giản, nhưng không phải lúc nào cũng diễn ra như vậy. Nó phụ thuộc vào tính đặc hiệu của CSS, khi nào và nên áp dụng quy tắc CSS nào. Vì vậy, hãy phá vỡ tính đặc hiệu của CSS và cách sử dụng nó một cách hiệu quả. Tính đặc hiệu trong CSS là gì? Nói một cách đơn giản, nếu bạn có nhiều bộ chọn CSS cho một phần tử, thì phần tử có giá trị cụ thể cao hơn sẽ được áp dụng. Các bộ chọn khác nhau có trọng lượng khác nhau và trình duyệt sẽ quyết định cái nào phù hợp nhất với phần tử đó. Làm thế nào nó hoạt động? Tính đặc hiệu của bộ chọn có thể được phân loại theo bốn cấp độ sau: Kiểu nội tuyến hoặc CSS ID Các lớp, lớp giả và thuộc tính Các phần tử hoặc phần tử giả Kiểu nội tuyến hoặc CSS , trong đó CSS được áp dụng trực tiếp trên tài liệu HTML, trông giống như thế này <p style="margin-bottom: 0">. Kiểu nội tuyến sẽ luôn có mức độ đặc hiệu cao nhất. Thứ hai trong thứ tự này là ID , như #content. Vì vậy, bất kỳ bộ chọn nào sử dụng ID sẽ có mức độ đặc hiệu cao thứ hai. Các lớp , lớp giả và thuộc tính là thứ ba theo thứ tự này. Họ trông giống như: .post, :hover, và [title], tương ứng. Các phần tử và phần tử giả có giá trị nhỏ nhất. livà :afterlà những ví dụ cơ bản của một yếu tố và yếu tố giả. Tính toán Giá trị độ đặc hiệu có thể được tính theo hướng dẫn sau: Kiểu nội tuyến hoặc css: 1,0,0,0 ID: 0,1,0,0 Lớp hoặc giả lớp và thuộc tính: 0,0,1,0 Các phần tử và phần tử giả: 0,0,0,1 Bộ chọn phổ quát (*): 0 Để kiểm tra mức độ cụ thể của bộ chọn, bạn có thể sử dụng máy tính Độ đặc hiệu . Các quy tắc cơ bản về tính đặc hiệu của CSS Bây giờ bạn đã có ý tưởng về cách tổ chức cụ thể, hãy thảo luận về một số quy tắc và ví dụ chung! Đây là HTML cơ bản tôi sẽ sử dụng trong các ví dụ của mình. Ở đây tôi có một danh sách nhỏ trong một container với #content. Quy tắc 1 Nếu bạn có hai hoặc nhiều bộ chọn giống nhau cho một phần tử, tất cả chúng sẽ có cùng giá trị độ đặc hiệu, do đó, phần thấp hơn hoặc phần cuối cùng sẽ được áp dụng. Trong đoạn mã CSS sau, cả hai bộ chọn đều có độ đặc hiệu như nhau, vì vậy limàu sẽ có màu vàng, vì nó được đặt sâu hơn xuống dòng. Quy tắc 2 Nếu nhiều bộ chọn được sử dụng cho một phần tử, bộ chọn có giá trị cụ thể cao hơn sẽ được áp dụng. Trong ví dụ sau, liđược nhắm mục tiêu bởi hai bộ chọn khác nhau và cả hai đều ảnh hưởng đến màu phông chữ. Vậy, nên áp dụng quy tắc nào? Giống như ví dụ trước, trong khái niệm thứ tự CSS, cái thứ hai nên áp dụng (vì vậy màu li sẽ là màu xanh lá cây) nhưng vì .list licó giá trị độ đặc hiệu cao hơn ul li, màu sẽ vẫn là màu đỏ. Quy tắc 3 Chúng tôi đã thấy các yếu tố vượt trội hơn về mức độ cụ thể, bây giờ hãy xem điều gì xảy ra với một ID. Trong ví dụ sau, chúng tôi có một lớp và ID đều nhắm mục tiêu cùng một yếu tố và ảnh hưởng đến màu phông chữ. Một lần nữa cùng một câu hỏi: quy tắc nào nên áp dụng? Quy tắc 4 !importantsẽ ghi đè bất kỳ bộ chọn của bất kỳ giá trị cụ thể nào. Nhưng hãy nhớ rằng !importantkhông nên quá lạm dụng, vì nó không được coi là một cách thực hành tốt nhất về CSS. Hướng dẫn cuối cùng để thiết lập môi trường phát triển WordPress cục bộ ... Nếu bạn là tác giả của CSS của bạn và không ghi đè quy tắc hiện có, bạn sẽ khó sử dụng !important. !importantChỉ sử dụng khi bạn đang cố gắng ghi đè CSS của người khác và tính đặc hiệu của bạn không thể vượt trội hơn bộ chọn trước đó, đặc biệt là khi bạn không thể kiểm soát thứ tự đặt CSS của mình trong HTML. Điều này sẽ xảy ra chủ yếu khi làm việc trong WordPress, nơi bạn sẽ tìm thấy nhiều tệp CSS đã được thêm bởi các plugin và chủ đề khác nhau. Nói chung, CSS plugin dành riêng cho plugin và sử dụng ID, inline-css hoặc thậm chí !importantđể có độ đặc hiệu cao hơn, để tránh mọi xung đột CSS. Để ghi đè CSS đó, bạn phải sử dụng độ đặc hiệu cao hơn nữa; cho những kịch bản bạn có thể sử dụng !important. Trong ví dụ sau, tôi đang tạo lại các kịch bản trước đó, với limục tiêu với các bộ chọn CSS khác nhau, nhưng bạn có thể thấy rằng !importantghi đè tất cả các quy tắc và màu sẽ có màu vàng. Một vài ngoại lệ Các yếu tố và yếu tố giả có độ đặc hiệu ít nhất, nhưng có một vài trường hợp ngoại lệ thú vị (và hơi khó hiểu!). (Khó hiểu vì dường như họ không tuân theo các quy tắc chúng ta vừa thấy.) Trong ví dụ này, bạn sẽ thấy :first-child(lớp giả) và: dòng đầu tiên (phần tử giả). Chúng ta vừa biết rằng các lớp giả sẽ có độ đặc hiệu cao hơn các phần tử giả, do đó, theo đó, màu dòng đầu tiên của đoạn nên là màu xanh lá cây, nhưng thay vào đó sẽ là màu hồng. Đây là nơi đặc thù có một chút khó hiểu. Tôi chỉ có thể giả định rằng lý do cho kết quả này :first-linelà gần với yếu tố hơn và có thể được coi là kiểu nội tuyến. Bạn có thể kiểm tra jsfiddle cho một ví dụ khác. Làm thế nào để sử dụng tính đặc hiệu một cách hiệu quả? Nếu bạn hiểu các quy tắc về tính đặc hiệu của CSS, bạn có thể sử dụng nó rất hiệu quả và làm cho CSS của bạn có thể sử dụng lại được. Giả sử bạn muốn sử dụng giống nhau .buttonnhưng với các màu nền khác nhau, vì vậy bạn thiết lập một bộ chọn cụ thể : .red-block .button. Nếu .buttonđược bọc trong một .red-blockthùng chứa, thì màu nền của nút mặc định sẽ chuyển sang màu đỏ. Tính đặc hiệu CSS rất hữu ích khi tùy chỉnh các chủ đề WordPress, nơi bạn đang cố gắng ghi đè CSS của tác giả chủ đề bằng chính chủ đề của bạn. Cách tạo một trang web WordPress đa ngôn ngữ Những lỗi thường gặp cần tránh Một số người sử dụng các công cụ chọn cực kỳ cụ thể, đây không phải là một cách thực hành tốt. Chỉ cụ thể theo yêu cầu. Ví dụ: đoạn mã này nhắm mục tiêu linhưng quá cụ thể. Phần kết luận Như bạn có thể thấy, tính đặc hiệu của CSS là một công cụ quan trọng và mọi nhà phát triển front-end nên có nó trong bộ công cụ của họ. Một sự hiểu biết rõ ràng về khái niệm này có thể đi một chặng đường dài trong việc giúp bạn trở thành một nhà phát triển front-end giỏi.