css - 向 div 添加特殊性(覆盖现有的 CSS)

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 特性添加到上面的代码中吗？

谢谢 重新开始

(顺便说一句，我使用的是来自 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“祖 parent ”或类“祖 parent ”，并设置包含该类或 ID 的规则。

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

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

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