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

如何使选择器更具体?

stylesheet css html

Canavar · 技术社区 · 15 年前

在页面中,我使用带有自己样式表的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 回复 | 直到 11 年前

Matthew James Taylor 15 年前

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

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

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

cjk 15 年前

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

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

Jeremy French 15 年前

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

Canavar 15 年前

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

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

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前