沒有特定ID的類的CSS選擇器

我有一系列元素與類.tab-pane附加到它。他們也有自己獨特的ID。我試圖選擇沒有ID #home的每個.tab-pane。我試過.tab-pane:not#home{...}，但沒有奏效。有什麼建議麼？沒有特定ID的類的CSS選擇器

樣本HTML

<div id="home" class="tab-pane">...</div> 
<div id="myself" class="tab-pane">...</div> 
<div id="contact" class="tab-pane">...</div> 
<div id="resume" class="tab-pane">...</div>

來源

2012-10-26 Jon

嘗試，而不是：

.tab-pane:not(#home) { 
    color: red; 
}

JS Fiddle demo。

你不選擇的東西出現在:not()選擇器的括號內，而不是顯示爲「鏈接」僞選擇器。

在這種特定的情況下，因爲你想有沒有風格的元素是第一元素，你也可以使用普通的兄弟姐妹組合子~以不同的樣式隨後的兄弟姐妹：

#home ~ .tab-pane { 
    color: red; 
}

JS Fiddle demo 。

但這和可能，只有工作，如果不同風格的（或不被稱呼）元素是第一，因爲CSS只能選擇出現在DOM後面的元素，無論是作爲後續的兄弟姐妹或早期元素的後代。

參考文獻：

Selectors Level 3, negation :not() pseudo-class。

來源

2012-10-26 17:13:52

謝謝。這正是我要找的:) – Jon

非常歡迎，我很高興能夠得到幫助！ =） –

也許你的意思是這樣：

.tab-pane:not(#home)

來源

2012-10-26 17:13:37

這正是我的意思。謝謝:) – Jon

你也可以。如果你想不包含的ID與字母「h」開始嘗試這種（這就像正則表達式）

.tab-pane:not([id^='home']) 
{/*your code*/}

然後嘗試下面的一個：

.tab-pane:not([id^='h']) 
{/*your code*/}

來源

2012-10-26 17:16:34

您可以通過使用.tab-pane:eq(noOfClass)選擇要麼訪問每一個單獨的類

個

檢查例子here

，或者您也可以使用：不能選擇器.tab-pane:not(#home)

來源

2012-10-26 17:17:06

'eq（）'是一個[tag：jquery]選擇器，而這個問題沒有提到JavaScript，更不用說jQuery了。現在，CSS的'：nth-child（）'/'：nth-of-type（）'也許..？ –

沒有特定ID的類的CSS選擇器

回答

相關問題