CSS使用：不選擇器和邊界

我有一些CSS像這樣：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 th中沒有活動的類？（我想要一個CSS方法，而不是JQuery，或者在HTML中添加一個無效的類）。

在瀏覽器（不正確）：http://screencast.com/t/sqJfWS6S 在Firefox（正確）：http://screencast.com/t/kXPHPV6Hyao

參見下使用的變量行。

來源

2012-07-27 cdub

我們可以看到一個jsFiddle演示嗎？ – BoltClock 2012-07-27 22:15:54

您的屏幕截圖看起來像活動選項卡下的邊框將來自較低的div，而不是來自選項卡。你看看Chrome的調試器是什麼說的是在選項卡和主區域的邊界值？ – jfriend00 2012-07-27 22:25:37

在Chrome調試器中，下方的div只有邊界左側，右側和底部 – cdub 2012-07-27 22:29:43

既然有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-27 22:57:00 cdub

table.varTabs th:not(.active)

但這應該只是CSS3支持的環境

來源

2012-07-27 22:17:28 NSF

下工作，你可以在一個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 */ 
}

來源

2012-07-27 22:18:25 jfriend00

是的，這就是css通常應該是 – NSF 2012-07-27 22:19:35

ummm這是怎麼回事，然後我有以上 – cdub 2012-07-27 22:20:26

@chris - 這是沒有什麼不同。這是你如何做到的。沒有看到實際的HTML/CSS，我們無法幫助您確定問題的具體細節。您可能還有其他一些您尚未描述的問題導致問題。 – jfriend00 2012-07-27 22:23:47

CSS使用：不選擇器和邊界

回答

相關問題