Làm thế nào để ghi đè! Quan trọng?

Tôi đã tạo một biểu định kiểu tùy chỉnh ghi đè CSS gốc cho mẫu Wordpress của tôi. Tuy nhiên, trên trang lịch của tôi, CSS gốc có chiều cao của mỗi ô được đặt với !importantkhai báo:

td {height: 100px !important}

Có một số cách tôi có thể ghi đè này?

Ghi đè! Sửa đổi quan trọng

1. Chỉ cần thêm quy tắc CSS khác với !important và cung cấp cho bộ chọn độ đặc hiệu cao hơn (thêm thẻ, id hoặc lớp bổ sung vào bộ chọn)
2. thêm một quy tắc CSS với cùng một bộ chọn ở điểm muộn hơn so với quy tắc hiện có (trong một tie, cái cuối cùng được xác định sẽ thắng).

Một số ví dụ có độ đặc hiệu cao hơn (thứ nhất là cao nhất / ghi đè, thứ ba là thấp nhất):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Hoặc thêm cùng một bộ chọn sau cái hiện có:

td {height: 50px !important;}

Tuyên bố từ chối trách nhiệm:

Nó gần như không bao giờ là một ý tưởng tốt để sử dụng !important. Đây là kỹ thuật xấu của những người tạo ra mẫu WordPress. Theo kiểu lan truyền, nó buộc người dùng mẫu phải thêm các !importantsửa đổi riêng để ghi đè lên nó và nó giới hạn các tùy chọn để ghi đè lên nó thông qua JavaScript.

Nhưng, thật hữu ích khi biết cách ghi đè lên nó, nếu đôi khi bạn phải làm thế.

Chỉ !importantnên được sử dụng khi bạn có bộ chọn trong biểu định kiểu của mình với tính đặc hiệu xung đột .

Nhưng ngay cả khi bạn có tính đặc hiệu xung đột, tốt hơn là tạo một bộ chọn cụ thể hơn cho ngoại lệ. Trong trường hợp của bạn, tốt hơn là có một classHTML của bạn mà bạn có thể sử dụng để tạo một bộ chọn cụ thể hơn mà không cần !importantquy tắc.

td.a-semantic-class-name { height: 100px; }

Cá nhân tôi không bao giờ sử dụng !importanttrong phong cách của tôi. Hãy nhớ rằng C trong CSS là để xếp tầng. Sử dụng !importantsẽ phá vỡ điều này.

Tuyên bố từ chối trách nhiệm: Tránh! Quan trọng bằng mọi giá.

Đây là một hack bẩn, bẩn, nhưng bạn có thể ghi đè một! Quan trọng, mà không cần! Quan trọng, bằng cách sử dụng một hình ảnh động (lặp vô hạn hoặc rất lâu) trên tài sản mà bạn đang cố gắng ghi đè lên các nhà nhập khẩu.

@keyframes forceYellow {
  from {
    background-color: yellow;
  }
  to {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: red !important;
  animation: 1s linear infinite forceYellow;
}

<div></div>

Được rồi đây là một bài học nhanh về Tầm quan trọng của CSS. Tôi hy vọng rằng dưới đây sẽ giúp!

Trước hết, mỗi phần của tên kiểu là trọng số, vì vậy bạn càng có nhiều yếu tố liên quan đến kiểu đó thì nó càng quan trọng. Ví dụ

#P1 .Page {height:100px;}

quan trọng hơn:

.Page {height:100px;}

Vì vậy, khi sử dụng quan trọng, lý tưởng này chỉ nên được sử dụng, khi thực sự cần thiết. Vì vậy, để vượt qua sự giải mã, làm cho phong cách cụ thể hơn, nhưng cũng có một ghi đè. Xem bên dưới:

td {width:100px !important;}
table tr td .override {width:150px !important;}

Tôi hi vọng cái này giúp được!!!

Ghi đè bằng JavaScript

$('.mytable td').attr('style', 'display: none !important');

Đã làm cho tôi.

Điều này cũng có thể giúp

td[style] {height: 50px !important;}

Điều này sẽ ghi đè bất kỳ kiểu nội tuyến

Trong mọi trường hợp, bạn có thể ghi đè heightbằng max-height.

Tôi muốn thêm một câu trả lời cho điều này chưa được đề cập, vì tôi đã thử tất cả những điều trên mà không có kết quả. Tình huống cụ thể của tôi là tôi đang sử dụng semantic-ui, được xây dựng trong !importantcác thuộc tính trên các yếu tố (cực kỳ khó chịu). Tôi đã thử mọi cách để ghi đè lên nó, chỉ cuối cùng mới làm được một việc (sử dụng jquery). Nó là như sau:

$('.active').css('cssText', 'border-radius: 0px !important');