代码之家 › 专栏 › 技术社区 › Canavar

如何使选择器更具体?

stylesheet css html

1

Canavar · 技术社区 · 16 年前

在页面中,我使用带有自己样式表的Tabstrip。这个tabstrip用div和anchors编写。

我在选项卡中添加了其他一些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; }

4 回复 | 直到 12 年前

1

4

Matthew James Taylor 16 年前

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

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

在上面的示例中,您可以设置 div , ul 和 li 不管怎样,您可以单独针对它们应用样式规则。继承不会有问题。

2

cjk 16 年前

重写在最特定的类中不需要继承的每个元素。

例如,in.graphtexitem、override height和padding。

3

2

Jeremy French 16 年前

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

4

0

Canavar 16 年前

通过去除 div 从此样式表解决了我的问题:

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

但我还是想知道是否有办法?