覆蓋CSS樣式

Question

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

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

Answer 1

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

<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

Answer 2

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

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

Answer 3

該規則是您選擇具有更多細節的元素時，其規則將應用於更高優先級。你的情況，你可以分配一個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更高的優先級。 ！

Answer 4

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

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

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

Answer 5

添加一個新類與一個！：

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

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

Answer 6

您應該在頁面的主容器元素中更改指令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>