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

Question

我有一系列附有类 .tab-pane 的元素。他们每个人都有自己独特的 ID。我正在尝试选择没有 ID #home 的每个 .tab-pane。我已经尝试过 .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>

Answer 1

改为尝试:

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

JS Fiddle demo .

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

在这种特定情况下，由于您想要不设置样式的元素是第一个 元素，您还可以使用general-sibling 组合符~ 来设置后续样式 sibling 不同:

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

JS Fiddle demo .

但这会，而且可能，只有当不同样式(或非样式)元素是第一个时才有效，因为 CSS 只能选择出现的元素稍后在 DOM 中，作为较早元素的后续 sibling 或后代。

引用资料:

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