Khi nhiều quy tắc CSS tham chiếu cùng một phần tử HTML, trình duyệt cần một quy tắc ngón tay cái để dự đoán hướng dẫn tạo kiểu nào sẽ được ưu tiên. Điều này được gọi là ghi đè CSS. Tùy thuộc vào loại bộ chọn nào được sử dụng để tạo kiểu cho một phần tử, có một số quy tắc xác định kiểu nào ghi đè kiểu khác
Hãy lấy một ví dụ nhỏ để hiểu làm thế nào điều này được thực hiện
Mã HTML và CSS mẫu hiển thị văn bản Hello World có màu đỏ. Phần tử ghi đè lớp
Trong mẫu mã ở trên, phần tử đoạn chỉ định kiểu dáng trong CSS bên ngoài. Điều này áp dụng cho bất kỳ phần tử đoạn văn nào không chỉ là “Xin chào thế giới. ” đoạn văn. Bây giờ, tôi muốn hiển thị đoạn văn bản hello world của mình khác với tất cả các đoạn khác. Đối với điều này, tôi đang thêm một lớp màu xanh lam như hình bên dưới
Mã HTML và CSS mẫu ghi đè kiểu phần tử p bằng một lớp cụ thể
Bây giờ, màu văn bản thay đổi từ Đỏ sang xanh xác nhận rằng một lớp có tính đặc hiệu cao hơn so với thẻ phần tử
Lớp ghi đè lớpKiến thức phổ biến là kiểu lớp ghi đè kiểu phần tử chung. Nhưng, bạn có biết làm thế nào một phong cách lớp ghi đè lên một phong cách khác. Mẹo nhỏ này sẽ hữu ích khi bạn có nhiều lớp cạnh tranh với nhau để chỉ định kiểu dáng cho một phần tử cụ thể
Với các thay đổi trên, màu chữ hello world chuyển từ xanh sang cam. Ghi chú. Bạn có thể chỉ định tên lớp theo bất kỳ thứ tự nào trong thẻ p nhưng quy tắc ghi đè CSS đề xuất rằng thứ tự ưu tiên được cung cấp cho lớp được xác định cuối cùng trong CSS
Id ghi đè lớpBộ chọn lớp có thể sử dụng lại. Nói cách khác, nhiều phần tử có thể có cùng tên lớp và do đó, kiểu dáng giống nhau. Ngược lại, HTML không cho phép bạn sử dụng lại ID. Nếu phần tử bạn đang tạo kiểu có cả thuộc tính lớp và id, trong trường hợp đó, kiểu ID sẽ được ưu tiên hơn lớp. Bởi vì các phần tử khác không thể tham chiếu đến cùng một ID, kiểu bộ chọn ID sẽ cụ thể hơn so với một lớp
Mã HTML và CSS mẫu sử dụng bộ chọn ID để ghi đè kiểu bộ chọn lớp
Như mong đợi, màu văn bản xin chào thế giới thay đổi từ màu cam sang màu tím
Id ghi đè kiểu nội tuyếnCSS có thể được thêm vào HTML dưới dạng thẻ nội tuyến và khi hoàn tất, kiểu nội tuyến được chỉ định sẽ được ưu tiên hơn các hướng dẫn kiểu dáng khác đã lưu ý ở trên. Bây giờ, hãy viết lại ví dụ hiện tại của chúng ta bằng cách thêm một kiểu nội tuyến vào thành phần đoạn văn trong HTML
Mã HTML mẫu chỉ định kiểu nội tuyến sẽ ghi đè kiểu bộ chọn id, lớp và phần tử
Với việc bổ sung kiểu nội tuyến, màu văn bản xin chào thế giới thay đổi từ màu tím sang màu xanh lá cây
CSS quan trọng ghi đè tất cảQuan trọng là một thuộc tính quan trọng có thể được thêm vào kiểu dáng CSS. Như tên ngụ ý, nó cho biết kiểu dáng mà nó đi kèm là quan trọng và có thể ghi đè kiểu dáng nội tuyến. . quan trọng được thêm vào cuối dòng hướng dẫn tạo kiểu như được thực hiện với ví dụ của chúng tôi bên dưới
Một mã CSS mẫu với. thẻ quan trọng được thêm vào kiểu bộ chọn thành phần đoạn văn
Văn bản xin chào thế giới hiện được hiển thị bằng màu đỏ vì. quan trọng được thêm vào kiểu thẻ phần tử p sẽ ghi đè tất cả các loại bộ chọn khác
Trong blog này, tôi sẽ thảo luận về cách giải quyết thách thức mà ứng dụng lớp phủ có thể gặp phải, trong đó giao diện người dùng của sản phẩm của họ có vẻ bị bóp méo và đó là do một số kiểu CSS bị ứng dụng cơ bản ghi đè
Ứng dụng lớp phủ hiển thị chú giải công cụ trên ứng dụng cơ bản khi CSS bị ghi đè
Tôi sẽ đề cập đến các kỹ thuật sau
- Tạo nội dung của bạn bên trong một
- Tăng tính đặc hiệu của các kiểu CSS của bạn
- Tạo và sử dụng các yếu tố tùy chỉnh
- Củng cố lại các yếu tố tùy chỉnh với ShadowDOM
- Sử dụng thẻ
!important[không khuyến nghị]
Hãy bắt đầu với các cách để tạo bằng chứng giả mạo kiểu 'có thể' và nếu có, cách các ứng dụng cơ sở vẫn có thể ghi đè lên CSS của bạn. Và sau đó, tôi sẽ nói về khả năng [các] ứng dụng cơ sở sẽ sử dụng các phương pháp tạo kiểu này có thể ghi đè lên các kiểu của bạn là gì
Tạo nội dung của bạn bên trong một 'iframe'Hầu hết các nhà phát triển sẽ nhận thức được một là gì. [nếu không, đọc thêm về nó ở đây]. Vì iframe có document riêng nên CSS của document khác không ghi đè CSS bên trong tài liệu iframe. Vì vậy, hãy tạo tất cả nội dung của bạn bên trong một và ứng dụng cơ bản, sẽ là một document riêng biệt, không thể ghi đè lên CSS của bạn
Tuy nhiên, có thể vì lý do nào đó, một số nội dung của bạn không thể được tạo trong iframe. Vì vậy, để làm được điều đó, hãy xem các điểm bên dưới
Tăng tính đặc hiệu của kiểu CSS của bạnMột trong những cách dễ nhất để làm cho các kiểu CSS của bạn mạnh mẽ hơn so với ứng dụng cơ bản là tăng tính đặc hiệu của các kiểu CSS của ứng dụng [lớp phủ] của bạn
Theo quy tắc cụ thể, ưu tiên cao nhất được dành cho kiểu nội tuyến. Vì vậy, hãy cố gắng tận dụng các kiểu nội tuyến càng nhiều càng tốt. Kiểu nội tuyến chỉ có thể bị ghi đè bởi ứng dụng cơ sở nếu kiểu của chúng đang sử dụng thẻ !important [thêm về thẻ này trong phần sau của blog]
Sử dụng kiểu nội tuyến có vẻ như là một cách khá dễ dàng. Tuy nhiên, không phải lúc nào chúng ta cũng sử dụng kiểu nội tuyến. Điều gì sẽ xảy ra nếu chúng ta muốn cung cấp cùng một kiểu cho tất cả các phần tử giống nhau, chẳng hạn như tất cả các hàng của một bảng cụ thể? . Bây giờ, nếu chúng ta sử dụng lớp để xác định phong cách của mình, thì tốt hơn là áp dụng tính đặc hiệu gia tăng. Đó là, bao gồm nhiều hơn 1 lớp hoặc id khi xác định phong cách của bạn. Nó làm tăng tính “đặc trưng” cho phong cách của bạn
Các kiểu được áp dụng theo cách này chỉ có thể được ghi đè bởi ứng dụng cơ sở với
- thẻ
!important - kiểu nội tuyến
Một kỹ thuật khác là sử dụng thứ gọi là Phần tử tùy chỉnh. Trong khi tạo các phần tử tùy chỉnh, bạn có thể đặt tên thẻ tùy chỉnh cho các phần tử như 0, v.v. Vì đây không phải là các tên thẻ tích hợp nên sẽ giảm khả năng CSS của bạn bị ghi đè do kiểu do ứng dụng khách xác định nhắm mục tiêu các tên thẻ cụ thể
Ví dụ. Giả sử ứng dụng cơ sở có phong cách này
body table {
....
}Bây giờ, nếu tiện ích con/phần tử chứa 1, có thể kiểu trên cũng được áp dụng cho nó. Nếu chúng tôi sử dụng các yếu tố tùy chỉnh của mình ở đây, chẳng hạn như 2, thì nó sẽ không bị ghi đè
Để cung cấp thông tin ngắn gọn về ShadowDOM là gì. Shadow DOM là phiên bản đóng gói của DOM. ShadowDOM có khả năng cô lập CSS và JavaScript, gần giống như một . Đọc thêm về ShadowDOM là gì và cách sử dụng nó với Custom Elements tại đây
“Các bộ chọn và kiểu bên trong nút DOM bóng không rò rỉ ra bên ngoài gốc bóng và các kiểu từ bên ngoài gốc bóng không rò rỉ vào. ”
Tôi đoán chúng tôi có lý do để sử dụng các phần tử tùy chỉnh được củng cố bởi ShadowDOM
Sử dụng ‘. thẻ quan trọng [không được đề xuất]Chắc hẳn nhiều người trong chúng ta đã sử dụng thẻ !important khá mạnh mẽ này ở đâu đó. Sử dụng thẻ này giống như đặt tính đặc trưng cho phong cách của chúng tôi ở mức cao bất hợp lý. Về cơ bản, bạn đang nói với trình duyệt rằng “không có vấn đề gì xảy ra, phong cách này không nên bị ghi đè”. Bất cứ khi nào chúng tôi ở trong một tình huống mà chúng tôi không biết tại sao phong cách của mình không được áp dụng, chúng tôi sẽ sử dụng cái này và thì đấy - Nó bắt đầu hoạt động. Ảo thuật
Tôi đoán điều này giải thích khá nhiều lý do tại sao chúng ta muốn sử dụng nó
Nhưng, chúng ta nên hạn chế sử dụng nó càng nhiều càng tốt. Tại sao?. Giả sử bạn có một phần tử mà bạn đã sử dụng thẻ này. Bây giờ, trong tương lai, giả sử vì lý do nào đó bạn cũng cần ghi đè kiểu của phần tử đó. Sau đó, cách duy nhất là sử dụng một thẻ !important khác trên phần tử mới. Và vòng luẩn quẩn bắt đầu. Đó là lý do tại sao hầu hết mọi người coi việc sử dụng nó là một thói quen xấu. Để hiểu rõ hơn về lý do không sử dụng, hãy xem bài viết này. Nó được giải thích khá tốt ở đây. Tác giả của bài viết đó tổng hợp nó khá độc đáo
Cơ hội mà ứng dụng cơ sở ghi đè CSS của chúng tôi là gì?Nếu tất cả các phong cách của bạn là. quan trọng, thì không có phong cách nào của bạn là quan trọng
Trong phần tính đặc hiệu, chúng tôi thấy rằng vẫn có khả năng CSS của các ứng dụng lớp phủ của chúng tôi sẽ bị ghi đè. Tôi muốn nói rằng xác suất này là rất ít đến không có. Chúng tôi thấy rằng [các] ứng dụng cơ sở có thể ghi đè lên CSS của chúng tôi nếu các kiểu nội tuyến hoặc !important được chúng sử dụng
- Nếu các kiểu nội tuyến đang ghi đè CSS của chúng ta, thì chúng phải có một số bookmarklet, tập lệnh, lặp lại trên một số thành phần cụ thể và thao tác với thuộc tính
7. Nhưng, một lần nữa, tôi không thấy điều này xảy ra - Đối với
!important, vì nó không được khuyến nghị nên tôi cũng không thấy có nhiều cơ hội ghi đè các vấn đề ở đây
Chỉ một điều ở đây - “Không sử dụng '. quan trọng' càng nhiều càng tốt. ” Hãy sử dụng những cách phù hợp để viết CSS của bạn và đảm bảo rằng nó không bị ghi đè