覆盖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>