Kiểu phần tử ghi đè CSS

Trên thực tế, nếu bạn sử dụng quy tắc !important, quy tắc này sẽ ghi đè TẤT CẢ các quy tắc tạo kiểu trước đó cho thuộc tính cụ thể đó trên phần tử đó

Chúng ta hãy xem xét một ví dụ

Ví dụ

#myid {
  màu nền. xanh da trời;
}

.myclass {
  màu nền. màu xám;
}

p {
  màu nền. màu đỏ. quan trọng;
}

Tự mình thử »

Ví dụ giải thích

Trong ví dụ trên. cả ba đoạn văn sẽ có màu nền đỏ, mặc dù bộ chọn ID và bộ chọn lớp có độ đặc hiệu cao hơn. Quy tắc !important ghi đè thuộc tính background-color trong cả hai trường hợp

quan trọng về. quan trọng

Cách duy nhất để ghi đè một quy tắc !important là đưa một quy tắc !important khác vào một khai báo có cùng đặc điểm (hoặc cao hơn) trong mã nguồn - và vấn đề bắt đầu từ đây. Điều này làm cho mã CSS trở nên khó hiểu và việc gỡ lỗi sẽ khó khăn, đặc biệt nếu bạn có một biểu định kiểu lớn

Ở đây chúng tôi đã tạo một ví dụ đơn giản. Không rõ lắm, khi bạn xem mã nguồn CSS, màu nào được coi là quan trọng nhất

Ví dụ

#myid {
  màu nền. màu xanh da trời. quan trọng;
}

.myclass {
  màu nền. xám. quan trọng;
}

p {
  màu nền. màu đỏ. quan trọng;
}

Tự mình thử »

Mẹo. Thật tốt khi biết về quy tắc !important. Bạn có thể thấy nó trong một số mã nguồn CSS. Tuy nhiên, không sử dụng nó trừ khi bạn thực sự phải

Có thể một hoặc hai trường hợp sử dụng hợp lý. quan trọng

Một cách để sử dụng !important là nếu bạn phải ghi đè một kiểu không thể ghi đè theo bất kỳ cách nào khác. Điều này có thể xảy ra nếu bạn đang làm việc trên Hệ thống quản lý nội dung (CMS) và không thể chỉnh sửa mã CSS. Sau đó, bạn có thể đặt một số kiểu tùy chỉnh để ghi đè lên một số kiểu CMS

Một cách khác để sử dụng !important là. Giả sử bạn muốn có giao diện đặc biệt cho tất cả các nút trên một trang. Ở đây, các nút được tạo kiểu với màu nền xám, văn bản màu trắng và một số phần đệm và đường viền

Ví dụ

.button {
  màu nền. #8c8c8c;
  màu. màu trắng;
  phần đệm. 5px;
  đường viền. 1px đen đặc;
}

Tự mình thử »

Giao diện của một nút đôi khi có thể thay đổi nếu chúng ta đặt nó bên trong một phần tử khác có độ đặc hiệu cao hơn và các thuộc tính sẽ xung đột. Đây là một ví dụ về điều này

Ví dụ

.button {
  màu nền. #8c8c8c;
  màu. màu trắng;
  phần đệm. 5px;
  đường viền. 1px đen đặc;
}

#myDiv a {
  màu. đỏ;
  màu nền. màu vàng;
}

Tự mình thử »

Để "buộc" tất cả các nút có giao diện giống nhau, bất kể điều gì xảy ra, chúng ta có thể thêm quy tắc !important vào các thuộc tính của nút, như thế này

Tôi đang cố gắng để một trang tự động điều chỉnh khi nội dung bổ sung được thêm vào trang. Tôi đã xác định bằng cách sử dụng Chrome (CTRL-SHIFT J hoặc Kiểm tra phần tử) rằng nếu tôi thay đổi một phần tử được liệt kê trong phần tử. phong cách, chiều cao namley. 180px' đến 'chiều cao. auto’ Tôi nhận được hiệu ứng mà tôi mong muốn. Tôi nhận thấy rằng vùng chứa chỉ có kiểu này ('chiều cao. auto’) nhưng nó bị gạch bỏ. Làm cách nào để xác định lý do tại sao điều này bị gạch bỏ và phần tử nào sẽ đặt kiểu để kiểu CSS hiệu quả là 'chiều cao. tự động' chứ không phải 'chiều cao. 180px’?

Cảm ơn bạn

1 tháng 4, 2014 lúc 11. 13 giờ sáng

Paulie_D

Hội viên

Có lẽ bạn có thể chia sẻ một liên kết?

Div sẽ có chiều cao tự động trừ khi được quy định khác...có vẻ như bạn cần xóa khai báo !important0 thay vì cố gắng thêm một khai báo mới

Tháng Tư 2, 2014 lúc 8. 15 giờ sáng

rkb

người tham gia

Đó dường như là vấn đề. Trong cửa sổ devtools của Chrome có một yếu tố phong cách. kiểu được đặt thành chiều cao. 180px nhưng không có mục nhập tương đương trong các kiểu. tập tin css. Thay vào đó, nếu tôi thay đổi điều này thành 'tự động' thì tôi sẽ nhận được hiệu ứng mà tôi muốn. Vấn đề là tôi không biết đặt 'chiều cao' ở đâu. phong cách tự động. Mục tiếp theo hiển thị các kiểu cho #demo. kết quả nhưng chiều cao. kiểu tự động bị gạch bỏ. Tôi không thể thấy bất kỳ đâu trong tệp CSS mà tôi đã đặt giá trị mã hóa cứng là 180px. Có vẻ như giá trị này được tính bằng cách nào đó

Tháng Tư 2, 2014 lúc 8. 22 giờ sáng

biên tập

người tham gia

Nếu Công cụ dành cho nhà phát triển Chrome cho bạn biết một kiểu được đặt trên !important1, điều đó có nghĩa là kiểu đó được đặt nội tuyến trên HTML (thường là bằng JavaScript). Để ghi đè lên điều đó, bạn cần tạo một quy tắc cụ thể hơn trong tệp CSS của mình

Tôi nghĩ điều duy nhất cụ thể hơn kiểu nội tuyến là một quy tắc (bộ chọn không thành vấn đề nhưng vì sự tỉnh táo của riêng bạn, hãy biến nó thành thứ chỉ đạt được nội dung bạn muốn) với ________ 1 ở cuối

Ví dụ

article .body p {
    height: auto !important;
}

Tuy nhiên, tôi cho rằng quy tắc đó được đặt trong một số JS hoặc jQuery vì hầu hết các plugin sẽ sửa đổi CSS của bạn bằng các kiểu nội tuyến. Nếu trường hợp này xảy ra, bạn nên hoàn tác kiểu trong cấu hình của plugin để không cần sử dụng ghi đè !important

Chúng tôi không thể giúp bạn nhiều nếu bạn không hiển thị cho chúng tôi trang có vấn đề

Đọc thêm về tính đặc hiệu của CSS

Tháng Tư 2, 2014 lúc 8. 28 giờ sáng

Paulie_D

Hội viên

Sẽ nói lại lần nữa…

Có lẽ bạn có thể chia sẻ một liên kết?

3 Tháng Tư, 2014 lúc 4. 46 giờ chiều

rkb

người tham gia

Ứng dụng web hiện không có trên trang web công cộng, ứng dụng này nằm trong nội bộ và không thể truy cập được. Khi vấn đề này được giải quyết, nó có thể ở trên một trang web công cộng mà tôi có thể đăng liên kết tới

Tháng Tư 4, 2014 tại 1. 43 giờ sáng

Paulie_D

Hội viên

Vấn đề là tôi không biết đặt 'chiều cao' ở đâu. phong cách tự động

Vì vậy, bạn không có quyền truy cập vào biểu định kiểu CSS?

Sử dụng "kiểm tra phần tử" sẽ cho bạn biết số dòng của quy tắc bạn cần thay đổi...lấy nó, mở biểu định kiểu trong trình chỉnh sửa yêu thích của bạn, thực hiện thay đổi, lưu tệp và thế là xong

4 Tháng Tư, 2014 lúc 5. 41 giờ sáng

rkb

người tham gia

Tôi có quyền truy cập vào biểu định kiểu CSS. Điều đó đưa tôi đến điểm của cuộc thảo luận này. Gần như tôi có thể nhận được, tôi xác định các thuộc tính kiểu như

#demo. kết quả {
lề-đáy. 40px;
chiều cao. tự động;
}

Sau đó, tôi chạy ứng dụng của mình và có vẻ như kiểu này không được áp dụng, vì vậy tôi kích hoạt các công cụ dành cho nhà phát triển Chrome và 'Kiểm tra phần tử' trên thành phần mà tôi muốn tạo kiểu. Ở phía bên tay phải, tôi thấy bộ chọn thành phần giống như tôi đã chỉ định nó trong biểu định kiểu nhưng chiều cao thuộc tính. ô tô bị gạch bỏ. Ngay phía trên mục này là một bộ chọn cho 'phần tử. phong cách' với một mục duy nhất 'chiều cao. 180px'. Nếu tôi thay đổi mục nhập này từ ‘180px’ thành ‘auto’, tôi sẽ nhận được kết quả mà mình muốn. Nhưng không có bộ chọn nào trong biểu định kiểu cho 'phần tử. phong cách' vì vậy tôi không chắc mình nên đặt 'chiều cao' ở đâu. auto' để nó được áp dụng cho 'phần tử. Phong cách'. Nếu tôi thay đổi biểu định kiểu của mình như

#demo. kết quả {
lề-đáy. 40px;
chiều cao. tự động. quan trọng;
}

tôi thấy chiều cao. Dòng 180px trong phần tử. bộ chọn kiểu trong 'Kiểm tra phần tử' bị gạch bỏ và một lần nữa tôi nhận được kết quả mà tôi muốn. Tôi muốn tránh đặt '. quan trọng' trong biểu định kiểu của tôi nếu có thể

Tháng Tư 4, 2014 lúc 6. 10 giờ sáng

Alen

người tham gia

Tôi thấy bộ chọn thành phần giống như tôi đã chỉ định trong biểu định kiểu nhưng chiều cao thuộc tính. ô tô bị gạch bỏ. Ngay phía trên mục này là một bộ chọn cho 'phần tử. phong cách' với một mục duy nhất 'chiều cao. 180px'. Nếu tôi thay đổi mục nhập này từ '180px' thành 'auto', tôi sẽ nhận được kết quả mà mình muốn

!important1 trong DevTools đề cập đến các kiểu nội tuyến được áp dụng cho phần tử đó. Kiểu nội tuyến sẽ được ưu tiên hơn bất kỳ kiểu nào bạn áp dụng qua biểu định kiểu. Đó là lý do tại sao tuyên bố của bạn bị gạch bỏ

Nhìn vào mã HTML của bạn và xem phần tử bạn đang cố sửa đổi có bất kỳ kiểu nội tuyến nào không… đại loại như

Kiểu dáng HTML có ghi đè CSS không?

Ghi đè kiểu CSS hoạt động như thế nào?