覆蓋CSS樣式

有沒有辦法完全覆蓋一個類？覆蓋CSS樣式

在woocommerce，我有這樣的代碼在樣式表：

.woocommerce-review-link { 
     bottom: 0; 
     display: block; 
     left: 0; 
     opacity: 0; 
     position: absolute; 
     right: 0; 
     top: 0; 
    }

我希望它變成：

.woocommerce-review-link { 
bottom: -4px; 
display: block; 
position: absolute; 
right: 180px; 
top: 0; 
}

但是，當我在我的主題輸入自定義CSS盒子，它依舊使用部分以前的CSS我沒加：

left: 0; 
    opacity: 0;

這是HTML：

<div class="woocommerce-product-rating"> 

<a href="#reviews" class="woocommerce-review-link" rel="nofollow">(<span class="count">2</span> customer reviews)</a> </div>

來源

2017-06-29 John

你可以只使用！重要 – sk03

切勿使用！重要 – Gerard

不，我不能。這只是壓倒我想要的部分。我想刪除「左」和「不透明」。 – John

您可以使用元素名稱前級覆蓋，如：

<element>.woocommerce-review-link { 
     bottom: -4px; 
     display: block; 
     position: absolute; 
     right: 180px; 
     top: 0; 
    }

如果它是那麼的鏈接：

a.woocommerce-review-link { 
     bottom: -4px; 
     display: block; 
     position: absolute; 
     right: 180px; 
     top: 0; 
}

，或者您也可以使用id與類，基本上是任何選擇器，以獲得更多的優先權.woocommerce-review-link

來源

2017-06-29 17:52:21 Dij

對不起，應該提到它是一個鏈接。

(2 customer reviews) \t

– John

要從樣式元素中「刪除」樣式，您需要將其設置回默認值/初始值。在這種情況下，您需要left: auto和opacity: 1。

你掛斷的是the cascading part of Cascading Style Sheets.聚合到選定元素的樣式，後面的樣式簡單地覆蓋以前定義的樣式。即使您在全新網站上的初始樣式僅僅是覆蓋過去的樣式，因爲瀏覽器以最常見元素上的一定樣式開始（這就是爲什麼<h1></h1>是大而粗大的，即使頁面上沒有其他東西，例如）。

來源

2017-06-29 18:10:02 Shauna

該規則是您選擇具有更多細節的元素時，其規則將應用於更高優先級。你的情況，你可以分配一個id，element和定製woocommerce-review-link類。比如

<a id="customized" class="woocommerce-review-link" href="#">Sth</a> 

#customized.woocommerce-review-link{ 
    bottom: -4px; 
    display: block; 
    position: absolute; 
    right: 180px; 
    top: 0; 
} 
.woocommerce-review-link { 
     bottom: 0; 
     display: block; 
     left: 0; 
     opacity: 0; 
     position: absolute; 
     right: 0; 
     top: 0; 
    }

在這裏，因爲你選擇使用#customized.woocommerce-review-link更specefic細節標籤，它的規則會比只選擇使用.woocommerce-review-link更高的優先級。！

來源

2017-06-29 18:23:48 soheil

重要最適合您添加重要的是這樣

.woocommerce-review-link { 
bottom: -4px !important; 
display: block !important; 
position: absolute !important; 
right: 180px !important; 
top: 0 !important; 
}

所有元素後，因此它會自動使用重要元件首先

來源

2017-06-29 18:34:29

添加一個新類與一個！：

.woocommerce-review-link { 
    bottom: 0; 
    display: block; 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
.woocommerce-review-link.changed { 
    bottom: -4px; 
    right: 180px; 
} 

<a href="#reviews" class="woocommerce-review-link changed" rel="nofollow">(<span class="count">2</span> customer reviews)</a>

您不應該在更改的類中輸入相同的值，只有第你正在改變的一個。

來源

2017-06-29 20:57:00

您應該在頁面的主容器元素中更改指令left,opacity爲left: auto,opacity: 1的值。使用!important強制是另一回事。

woocommerce-product-rating woocommerce-review-link, 
 
    a.woocommerce-review-link, 
 
    a.woocommerce-review-link:link, 
 
    a.woocommerce-review-link:visited, 
 
    a.woocommerce-review-link:hover, 
 
    a.woocommerce-review-link:active { bottom: -4px !important; display: block !important; position: absolute !important; right: 180px !important; 
 
    top: 0 !important; } 
 
    a.woocommerce-review-link:hover { color:red !important; }

<div class="woocommerce-product-rating"> 
 

 
    <a href="#reviews" class="woocommerce-review-link" rel="nofollow">(<span class="count">2</span> customer reviews)</a> </div>

來源

2017-06-30 06:09:00 hackershake

好的，如果我想刪除預定義的CSS，我需要將它們添加爲「默認」可以這麼說嗎？ – John

覆蓋CSS樣式

回答

相關問題