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

要从样式元素中“删除”样式，您需要将其设置回默认/初始值。在这种情况下，您需要left: auto和opacity: 1。

你要挂起的是the cascading part of Cascading Style Sheets.选定元素的样式是聚合的，后面的样式只是覆盖以前定义的样式。即使您在一个全新网站上的初始样式也只是覆盖过去的样式，因为浏览器在最常见的元素上开始使用一定数量的样式（这就是为什么<h1></h1>很大而且大胆，即使没有其他内容也是如此页面，例如）。

Answer 2

您可以在类之前使用元素名称来覆盖，例如：

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

规则是当您选择具有更多详细信息的元素时，其规则将以更高的优先级应用。在您的情况下，您可以为dl { display: block; float: left; } dt, dd { display: block; padding: 2px; margin: 2px; } dt { padding-bottom: 20px; padding-top:10px; } dd { color: green; }分配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选择。

Answer 4

！important 最适合你添加！在这样的所有元素之后重要

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

因此它首先自动使用！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>

覆盖CSS样式

6 个答案: