Question

我有一个使用CSS LESS的网站。为了覆盖一些CSS，我被告知要添加一点css特异性。

我的代码中有<div class="rt-bg2">。

我在firebug中找到了这种CSS样式：

.main-bg-blue .rt-bg2 { background-image: url("../images/backgrounds/blue/top-bg-texture.png"); }

我想覆盖输出此图像的设置。所以我明白我必须添加一个css特异性。我已经阅读了有关它的文章，并且相信我对它是如何工作有所了解，但我无法使我的覆盖工作。

在一个例子中，有人能告诉我如何在上面的代码中添加css特异性吗？

THX 雷因

（BTW我正在使用来自rockettheme.com的模板，其中覆盖LESS文件是通过创建custom.css文件来完成的，其中应该覆盖原始文件的代码。）

Answer 1

在开始深入研究这些文章之前，您一定要先阅读这些文章。

Andy Clark on specificity

Html dog on specificity

基于您的代码的基本示例。 Example fiddle

<div id="grandparent">
    <div class="main-bg-blue">
        <div class="rt-bg2">&nbsp;</div>
    </div>
</div>


div {width:100px; height:100px} /* let us see the div how we want */



     #grandparent .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=dolor"); }
    .main-bg-blue .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=ipsum"); }
    /* .rt-bg2 { background-image: url("http://dummyimages.com/100x100/000000/ffffff.png&text=lorem"); } */

要确保您的新规则将覆盖示例中的旧规则，而不在现有代码中添加类或ID，您应该在我的示例ID“grandparent”或class“grandparent”中找到父元素并设置包含该类或ID的规则。

ID虽然比类更具特异性。

#grandparent .main-bg-blue .rt-bg2 { background-image: url("http://some-other-image-or-similar"); }

这当然是一种方法。这实际上取决于你的HTML代码等。

Answer 2

如何添加style="background-image: url("whatever");"

class="rt-bg2"后的

？

Answer 3

为什么不添加

.main-bg-blue .rt-bg2 {
    background-image: url("<url of your image>");
}

如果要全局应用，请

到自定义css文件。

或者

将额外的类rt-bg2-special添加到<div class="rt-bg2 rt-bg2-special“＆gt;`等元素中，然后将以下内容添加到自定义css文件中

.main-bg-blue .rt-bg2.rt-bg2-special {
    background-image: url("<url of your image>");
}

为div添加特异性（覆盖现有CSS）

3 个答案: