我已經(jīng)為我的Wordpress模板創(chuàng)建了一個(gè)定制的樣式表來(lái)覆蓋原來(lái)的CSS。然而，在我的日歷頁(yè)面上，原始CSS將每個(gè)表格單元格的高度設(shè)置為！重要聲明:

td {height: 100px !important}

有什么方法能讓我超越它嗎？

一些具有較高特異性的示例(第一個(gè)是最高/覆蓋，第三個(gè)是最低):

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

或者在現(xiàn)有選擇器之后添加相同的選擇器:

td {height: 50px !important;}

免責(zé)聲明: 使用它幾乎從來(lái)都不是一個(gè)好主意！重要。這是WordPress模板創(chuàng)建者的拙劣工程。以病毒的方式，它迫使模板的用戶(hù)添加他們自己的！重要的修飾符來(lái)覆蓋它，并且它限制了通過(guò)JavaScript覆蓋它的選項(xiàng)。

但是，如果有時(shí)需要的話，知道如何覆蓋它是很有用的。

除了重寫(xiě)由style屬性設(shè)置的樣式之外！只有當(dāng)樣式表中的選擇器具有沖突的特性時(shí)，才應(yīng)該使用important。

但是，即使當(dāng)您有沖突的特殊性時(shí)，最好為異常創(chuàng)建一個(gè)更具體的選擇器。在您的情況下，最好在HTML中有一個(gè)類(lèi)，您可以使用它來(lái)創(chuàng)建一個(gè)更具體的選擇器，而不需要！重要的規(guī)則。

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

我個(gè)人從不使用！在我的樣式表中很重要。記住CSS中的C是級(jí)聯(lián)的。利用！重要的會(huì)打破這個(gè)。

聲明:避免！不惜一切代價(jià)重要。

這是一個(gè)骯臟的，骯臟的黑客，但你可以覆蓋！重要，不帶an！重要的是，通過(guò)在你試圖覆蓋的屬性上使用(無(wú)限循環(huán)或持續(xù)很長(zhǎng)時(shí)間的)動(dòng)畫(huà)。

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

樣式名稱(chēng)的每一部分都有權(quán)重，因此與該樣式相關(guān)的元素越多，它就越重要。例如

#P1 .Page {height:100px;}

比以下更重要:

.Page {height:100px;}

所以當(dāng)使用重要的時(shí)候，理想的情況是只有在真正需要的時(shí)候才使用。所以要覆蓋聲明，要使樣式更具體，而且要有一個(gè)覆蓋。見(jiàn)下文:

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

使用JavaScript覆蓋

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

為我工作。

這也有幫助

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

這將覆蓋任何內(nèi)聯(lián)樣式

你可以在選擇器中使用更高的特異性。

td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}

我在這里寫(xiě)了一篇關(guān)于如何覆蓋CSS的詳細(xì)文章。

當(dāng)這個(gè)問(wèn)題第一次被提出時(shí)，有一些現(xiàn)代方法是不存在的。

使用:is()為您的選擇器設(shè)置任意高的特異性

:是(td，#A#A#A:not(*)) {height: 200px！重要信息}

is()中選擇器列表的第二個(gè)選擇器設(shè)置了整個(gè)選擇器的特性，但是:not(*)部分意味著選擇器永遠(yuǎn)不會(huì)匹配任何元素本身。#A#A#A給出了(3，0，0)的特殊性，但是您可以安全地選擇任何足以覆蓋另一個(gè)選擇器的選擇器！重要設(shè)置。然而，這仍然是一種黑客行為。

更好的方法是使用級(jí)聯(lián)層。分層！重要聲明覆蓋非分層！重要聲明，因此您可以:

@layer { 
   td {height: 200px !important} 
}

通過(guò)使用命名層，您可以進(jìn)一步將其覆蓋到任意級(jí)別。

請(qǐng)注意，這兩種方法都不允許您重寫(xiě)！HTML樣式屬性中的重要設(shè)置。

在任何情況下，您都可以用max-height替代height。

我發(fā)現(xiàn)了一個(gè)很酷的技巧:沒(méi)有。 如果上面沒(méi)有幫助你，那么試試這個(gè):

.page-width:not(.anything) {

}

如果你想覆蓋一個(gè)！在類(lèi)中定義的重要標(biāo)記。只需在id標(biāo)簽中指定您的屬性。id的優(yōu)先級(jí)高于class。

我想補(bǔ)充一個(gè)沒(méi)有提到的答案，因?yàn)槲乙呀?jīng)嘗試了以上所有的方法都沒(méi)有效果。我的具體情況是我用的是semantic-ui，內(nèi)置了！元素上的重要屬性(極其討厭)。我嘗試了各種方法來(lái)覆蓋它，最后只有一件事成功了(使用jquery)。內(nèi)容如下:

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