Question

在页面中，我使用带有自己样式表的标签。这个标签用div和锚写。

我将一些其他div添加到选项卡中，但它们从外部tabstrip继承样式表。这个新的div有自己的css类。

这是我的问题，有没有办法在不改变css结构的情况下打破这种继承？

标签的CSS样式：

div.tabs {
    padding: .5em;
}
div.tabs div.tabs {
    padding: 0;
}
div.tabs div.tabs div {
    clear: left;
    height: 4em;
    padding: .5em;
    border: 1px solid #003366;
}

新添加的div使用此类：

.graphTextItem{ font-family:sans-serif; font-size:12px; border: solid 1px #78ACFF; text-align:center; width:150px; }
.graphImageItem{ border-left: solid 1px #78ACFF; border-right: solid 1px #78ACFF; text-align:center; height:70px; }

Answer 1

您可以尝试为每个嵌套级别而不是所有div使用不同的元素：

<div>
   <ul>
      <li></li>
   </ul>
</div>

在上面的示例中，您可以随意设置div，ul和li的样式，您可以单独定位它们以应用样式规则。继承不会成为问题。

Answer 2

覆盖您需要在最具体的类中继承的每个元素。

e.g。在.graphTextItem中，覆盖高度和填充。

Answer 3

不是真的。继承是CSS的一部分。如果需要特定值，请指定它。

Answer 4

从此样式表中删除 div 解决了我的问题：

div.tabs div.tabs {
    clear: left;
    height: 4em;
    padding: .5em;
    border: 1px solid #003366;
}

但我仍然怀疑是否有办法？

如何使我的选择器更具体？

4 个答案: