Màu css không ghi đè
|
Đôi khi các nhà phát triển phải làm việc với các mã cũ và đó là khi họ gặp phải một số vấn đề lớn, đặc biệt là kiểu nội tuyến không thể ghi đè Để ngăn chặn vấn đề đó, bạn nên hiểu hai khái niệm - khái niệm Thứ tự và Kế thừa Thuật ngữ “xếp tầng” có nghĩa là thứ tự phân cấp trong đó các loại biểu định kiểu khác nhau tương tác khi hai kiểu xung đột. Xung đột xảy ra khi hai kiểu khác nhau được áp dụng cho cùng một phần tử Đối với những trường hợp này, tồn tại một thứ tự cho các biểu định kiểu theo mức độ ưu tiên của chúng (4 có mức độ ưu tiên cao nhất)
Vì vậy, điều đó có nghĩa là khi xung đột nảy sinh giữa hai phong cách, phong cách cuối cùng được sử dụng sẽ được ưu tiên. Để rõ ràng hơn, bạn nên nhớ hai quy tắc này
Bạn có thể tìm thấy các ví dụ về các loại biểu định kiểu khác nhau tại đây HTML sử dụng mối quan hệ cha-con. Một phần tử con thường sẽ kế thừa các đặc điểm của phần tử cha trừ khi được định nghĩa khác. Ví dụ, nhìn vào đoạn mã sau Kể từ khi thẻ, là phần tử con của chúng ta, nằm bên trong thẻ, là phần tử cha, nó sẽ lấy tất cả các kiểu được cung cấp cho thẻ ngay cả khi nó không được cung cấp bất kỳ kiểu nào của riêng nó. Nhưng nếu bạn muốn đoạn văn áp dụng một số quy tắc của phần thân bài chứ không phải các quy tắc khác, bạn có thể ghi đè các quy tắc mà bạn không muốn. Đây là một ví dụ cho bạn Bây giờ hãy xem danh sách các ưu tiên bên trong (1 có ưu tiên cao nhất) Bạn có thể tìm thông tin chi tiết về id và lớp CSS tại đây Để hiểu rõ hơn, hãy ghi nhớ cấu trúc sau Điều đó có nghĩa là nếu bạn có một phần tử có bộ chọn lớp và ID với các kiểu khác nhau, thì kiểu ID sẽ được ưu tiên. Ví dụ, hãy xem mã này Như chúng ta thấy, Class được đặt sau ID nhưng ID vẫn được ưu tiên hơn. Nó chỉ áp dụng nếu cả ID và Class được sử dụng trong cùng một phần tử Bây giờ, hãy xem một ví dụ, trong đó ID và Class được sử dụng trong hai phần tử khác nhau Ở đây, bộ chọn Lớp ghi đè bộ chọn ID vì nó là bộ chọn được sử dụng lần cuối. Bộ chọn ID chỉ được ưu tiên hơn bộ chọn Lớp nếu cả hai đều được sử dụng trong cùng một phần tử Bây giờ chúng ta hãy xem làm thế nào chúng ta có thể làm cho một lớp ghi đè lên một lớp khác. Nếu lớp đó có màu nền là xanh dương và bạn muốn thay vào đó, để có nền màu đỏ, hãy thử thay đổi màu từ xanh lam sang đỏ trong chính lớp đó. Bạn cũng có thể tạo một lớp CSS mới xác định thuộc tính màu nền với giá trị màu đỏ và để tham khảo lớp đó Một. Khai báo quan trọng là một cách tuyệt vời để ghi đè các kiểu bạn muốn. Khi một quy tắc quan trọng được sử dụng trên khai báo kiểu, khai báo này sẽ ghi đè mọi khai báo khác. Khi hai tuyên bố xung đột với. các quy tắc quan trọng được áp dụng cho cùng một phần tử, khai báo có tính đặc hiệu cao hơn sẽ được áp dụng Hãy xem cách bạn có thể sử dụng. khai báo quan trọng để ghi đè kiểu nội tuyến. Bạn có thể đặt các kiểu riêng lẻ trong tệp CSS chung của mình dưới dạng. quan trọng ghi đè các kiểu nội tuyến được đặt trực tiếp trên các phần tử Tuy nhiên, bạn nên tránh sử dụng. quan trọng, bởi vì nó làm cho việc gỡ lỗi trở nên khó khăn hơn bằng cách phá vỡ tầng tự nhiên trong biểu định kiểu của bạn |
