1

我有一个使用 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 特异性？

谢谢雷金

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

4

3 回答 3

1

在开始深入研究之前，您绝对应该先阅读这些文章。

安迪克拉克关于特异性

关于特异性的 HTML 狗

基于您的代码的基本示例。示例小提琴

<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“祖父母”或类“祖父母”中找到父元素，并使用该规则设置规则包括类或 ID。

ID 比类具有更大的特异性。

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

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

于 2013-02-11T03:49:44.200 回答
0

怎么加style="background-image: url("whatever");"

之后class="rt-bg2" ？

于 2013-02-11T03:29:13.927 回答
0

为什么不加

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

如果要全局应用，则添加到自定义 css 文件。

或者

rt-bg2-special像">`这样的元素添加一个额外的类<div class="rt-bg2 rt-bg2-special，然后将以下内容添加到自定义css文件中

.main-bg-blue .rt-bg2.rt-bg2-special {
    background-image: url("<url of your image>");
}
于 2013-02-11T03:40:20.067 回答