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

Question

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

我将一些其他 div 添加到选项卡中，但它们从外部选项卡条继承了样式表。这个新的 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 设置样式，并且可以单独定位它们以应用样式规则.继承不会有问题。