Css không thể ghi đè kiểu

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ớp

Kiế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ể

Mã HTML và CSS mẫu trình bày cách một kiểu lớp có thể ghi đè kiểu lớp khác

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ớp

Bộ 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ến

CSS 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

  1. Tạo nội dung của bạn bên trong một