1

我有一系列带有类的元素.tab-pane。他们每个人都有自己唯一的 ID。我正在尝试选择每个.tab-pane没有 id 的#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

4 回答 4

3

请尝试：

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

JS 小提琴演示。

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

在这种特定情况下，由于您希望未设置样式的元素是第一个元素，因此您还可以使用通用兄弟组合~器以不同方式设置后续兄弟的样式：

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

JS 小提琴演示。

但这只有在不同样式（或无样式）元素是first时才有效，因为 CSS 只能选择在 DOM 中较晚出现的元素，作为较早元素的后续兄弟或后代。

参考：

于 2012-10-26T17:13:52.773 回答
1

也许你打算这样做：

.tab-pane:not(#home)
于 2012-10-26T17:13:37.983 回答
1

你也可以试试这个（这就像正则表达式）

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

如果您不想包含以字母“h”开头的 id，请尝试以下方法：

.tab-pane:not([id^='h'])
{/*your code*/}
于 2012-10-26T17:16:34.153 回答
1

您可以使用.tab-pane:eq(noOfClass)选择器访问每个单独的类

在此处查看示例

或者您也可以使用 :not 选择器.tab-pane:not(#home)

于 2012-10-26T17:17:06.780 回答