Nasıl geçersiz kılınır!

Wordpress şablonum için orijinal CSS'yi geçersiz kılan özel bir stil sayfası oluşturdum. Ancak, takvim sayfamda, orijinal CSS, !importantbildirimle birlikte ayarlanan her tablo hücresinin yüksekliğine sahiptir :

td {height: 100px !important}

Bunu geçersiz kılabilmemin bir yolu var mı?

! Önemli değiştiriciyi geçersiz kılma

1. Sadece başka bir CSS kuralı ekleyin !importantve seçiciye daha yüksek bir özgüllük verin (seçiciye ek bir etiket, kimlik veya sınıf ekleme)
2. varolandan daha sonraki bir noktada aynı seçiciye sahip bir CSS kuralı ekleyin (bir kravatta, sonuncusu kazanır).

Daha yüksek özgüllüğe sahip bazı örnekler (birincisi en yüksek / geçersiz kılmalar, üçüncüsü en düşüktür):

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

Veya mevcut seçiciden sonra aynı seçiciyi ekleyin:

td {height: 50px !important;}

Yasal Uyarı:

Kullanmak neredeyse hiç iyi bir fikir değildir !important. Bu, WordPress şablonunun yaratıcıları tarafından kötü bir mühendisliktir. Viral tarzda, şablonu kullanıcıları !importantonu geçersiz kılmak için kendi değiştiricilerini eklemeye zorlar ve JavaScript aracılığıyla geçersiz kılma seçeneklerini sınırlar.

Ancak, bazen yapmanız gerekiyorsa, nasıl geçersiz kılınacağını bilmek faydalıdır .

!importantEğer çakışan ile biçembendindeki seçiciler varken sadece kullanılmalıdır özgünlüğünü .

Ancak, çelişkili bir özgüllüğünüz olsa bile, istisna için daha spesifik bir seçici oluşturmak daha iyidir. Sizin durumunuzda class, HTML'nizde !importantkurala ihtiyaç duymayan daha spesifik bir seçici oluşturmak için kullanabileceğiniz bir daha iyi olur .

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

Şahsen !importantstil sayfalarımda asla kullanmam . CSS'deki C'nin basamaklı olduğunu unutmayın. Kullanmak !importantbunu kıracaktır.

Feragatname: Her ne pahasına olursa olsun!

Bu kirli, kirli bir hack'tir, ancak önemli olanları geçersiz kılmaya çalıştığınız mülk üzerinde (sonsuz döngü veya çok uzun ömürlü) bir animasyon kullanarak!!

@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>

Tamam, burada CSS Önemi hakkında hızlı bir ders var. Umarım aşağıdaki yardımcı olur!

Her şeyden önce, stillerin her kısmı bir ağırlık olarak adlandırılır, bu nedenle bu stille ilgili ne kadar çok öğeniz varsa o kadar önemlidir. Örneğin

#P1 .Page {height:100px;}

şunlardan daha önemlidir:

.Page {height:100px;}

Bu yüzden önemli kullanırken, ideal olarak bu sadece gerçekten ihtiyaç duyulduğunda kullanılmalıdır. Bu nedenle, düşüşü atlatmak için stili daha spesifik hale getirin, aynı zamanda bir geçersiz kılma ile. Aşağıya bakınız:

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

Umarım bu yardımcı olur!!!

JavaScript kullanarak geçersiz kıl

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

Benim için çalıştı.

Bu da yardımcı olabilir

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

Bu, tüm satır içi stilleri geçersiz kılar

Her durumda, heightile geçersiz kılabilirsiniz max-height.

Yukarıda belirtilenlerin hiçbirini boşuna denediğim için, daha önce bahsedilmeyen bir cevap eklemek istiyorum. Benim özel durumum, !importantelemanlar (son derece sinir bozucu) özellikleri üzerine inşa edilmiş semantik-ui kullanıyorum . Ben geçersiz kılmak için her şeyi denedim, sadece sonunda bir şey (jquery kullanarak) işe yaradı. Aşağıdaki gibidir:

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