1

我有一些像这样的CSS：

table.varTabs th
{
    border-collapse: collapse;
    border-bottom: #637356 2px solid;   
}

table.varTabs th.active
{
    border-collapse: collapse;
    border-bottom: #637356 0px solid;
}

这在我的表格中用于显示和隐藏我的 th 下的边框（这是表格顶部的选项卡）。所以在 Firefox 中，当活动在类中时，它可以正常工作，它从基本 css 获得的底部边框被删除。但我的 Chrome 版本并没有这样发生。

如何使用 CSS 选择在类中没有活动的 table.varTabs th？（我想要一种 CSS 方法，而不是 JQuery 或在 HTML 中添加非活动类）。

在 Chrome 中（不正确）：http ://screencast.com/t/sqJfWS6S 在 Firefox 中（正确）：http ://screencast.com/t/kXPHPV6Hyao

请参阅使用变量下的行。

4

3 回答 3

2

table.varTabs th:not(.active)

但这应该只在支持 css3 的环境下工作

于 2012-07-27T22:17:28.033 回答
1

由于不知何故有一个 Chrome 错误，我这样做了，它奏效了：

table.varTabs th
{
    border-collapse: collapse;
    border-bottom: #637356 2px solid;   
}

table.varTabs th.active
{
    border-collapse: collapse;
    border-bottom: #fff 2px solid;
}

创建一个白色边框以覆盖白色背景上的另一个边框。

于 2012-07-27T22:57:00.753 回答
0

您可以table.varTabs th在 CSS 规则中定位，然后将table.varTabs th.active规则放在它之后以覆盖您想要为活动类更改的任何内容。:not这样做时无需使用，并且与非常旧的浏览器兼容。

table.varTabs th {
   /* regular and default rules here */
}

table.varTabs th.active {
   /* .active override rules here */
}
于 2012-07-27T22:18:25.063 回答