没有特定ID的类的CSS选择器

时间:2012-10-26 17:12:20

标签: html css css3

我有一系列附加了类.tab-pane的元素。他们每个人都有自己独特的身份证。我正在尝试选择没有ID .tab-pane的每个#home。我试过了.tab-pane:not#home{...}但它没有用。有什么建议?

示例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>

4 个答案:

答案 0 :(得分:3)

尝试改为:

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

JS Fiddle demo

您未选择的内容会显示在:not()选择器的括号内,而不是显示为“链式”伪选择器。

在这种特定情况下,由于您想要未设置样式的元素是第一个元素,您还可以使用general-sibling组合子~来对后续兄弟节点进行不同的设置:

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

JS Fiddle demo

但是,如果不同样式(或未设置样式)的元素是第一个,那么可以只会起作用,因为CSS只能选择出现的元素稍后在DOM中,作为后续兄弟姐妹或后代的早期元素。

参考文献:

答案 1 :(得分:1)

也许你打算这样做:

.tab-pane:not(#home)

答案 2 :(得分:1)

你也可以尝试这个(这就像正则表达式

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

如果您不想包含以字母“h”开头的ID,请尝试以下内容:

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

答案 3 :(得分:1)

您可以使用.tab-pane:eq(noOfClass)选择器

访问每个单独的类

检查示例here

或者你也可以使用:not selector .tab-pane:not(#home)