Question

我有一些像这样的CSS：

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

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

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

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

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

查看使用变量下的行。

Answer 1

table.varTabs th:not(.active)

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

Answer 2

由于某种方式存在Chrome错误，我做了这个并且有效：

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

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

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

Answer 3

您可以在CSS规则中定位table.varTabs th，然后在其后面添加table.varTabs th.active规则，以覆盖您要为活动类更改的内容。这样做时无需使用:not，并且与旧版浏览器兼容。

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

table.varTabs th.active {
   /* .active override rules here */
}

CSS使用：不是选择器和边框

3 个答案: