Question

我将此div作为包含罚款的一部分：

.connier {
      text-align: left;
      padding-top: 5px;
      padding-bottom: 10px;
      padding-left: 10px;
      background-color:#CCC;
}

并使用它：

<div id="connier">
  <!--#include virtual="/cover/cover.asp" -->
</div>

但是我想在另一个页面上使用相同的包含文件，但这一次，透明背景但它仍然呈现相同的背景。

这是我尝试的内容

.connier.the_otherbg {
      text-align: left;
      padding-top: 5px;
      padding-bottom: 10px;
      padding-left: 10px;
      background-color:transparent;
}

<div class="the_otherbg">
  <!--#include virtual="/cover/rents.asp" -->
</div>

我做错了什么？

提前多多感谢

Answer 1

我认为你应该做的就是：

.connier {
      text-align: left;
      padding-top: 5px;
      padding-bottom: 10px;
      padding-left: 10px;
      background-color:#CCC;
}

.transparent
{
    background-color: transparent!important;
}

请记住我们正在使用CASCADING样式表（CSS），因此在另一个类中找到透明类很重要，如果没有，请使用'！important'（这不应该经常使用！）。

另请注意，div中使用'class ='属性。要使用'id'将一些css绑定到div，那么该类应该像'#myDivId'（在我看来这不太可用）

对于正常的div使用：

<div class="connier"></div>

和你的其他div使用:( div将同时有两个类）

<div class="connier transparent"></div>

通过这种方式，您可以使css更加实用和可维护。

希望这清除了一点

Answer 2

将CSS更改为：

.the_otherbg {
      background-color:transparent;
}

确保在.connier之后定义它。您还需要确保您的div有两个类：

<div class="connier the_otherbg">
  <!--#include virtual="/cover/rents.asp" -->
</div>

我会这样做，以便the_otherbg div继承对connier的任何更改。只定义它们之间的不同之处。将来，当您需要更改某些内容时，您只需要在一个地方进行更改。

演示：http://jsfiddle.net/CF88G/

Answer 3

我很想知道如果您使用class选择器定位由ID标记的div，第一个如何工作，但不要介意。

第二个选择器定位同时包含connier和the_otherbg类的元素，而您要定位的元素只有the_otherbg。尝试从选择器中删除.connier。

如何覆盖div？

3 个答案: