如何通过 css 排除一个特定的类？答案

【问题标题】：How can I exclude one specific class by css?如何通过 css 排除一个特定的类？
【发布时间】：2016-05-06 22:59:45
【问题描述】：

我有嵌套标签。您可以从 (http://plnkr.co/edit/QbMjutwEIRfHYpgELuIz?p=preview) 访问

我只想将这个类应用到 .verticaltab 类，所以我这样写 css：

CSS：

.nav-tabs {
    float: left;
    }
.verticaltab:not(.horizantaltab) .nav-tabs li.active>a{
    background: antiquewhite;
}

HTML：

<tabset vertical="true" type="tabs" class="vertical">
    <tab>
        <tab-heading>A</tab-heading>
        <tabset class="horizantaltab">
            <tab><tab-heading>SONY</tab-heading></tab>
            <tab><tab-heading>VESTEL</tab-heading></tab>
        </tabset>
    </tab>
    <tab>
        <tab-heading>B</tab-heading>
        <tabset class="horizantaltab">
            <tab><tab-heading>SONY</tab-heading></tab>
            <tab><tab-heading>VESTEL</tab-heading></tab>
        </tabset>
    </tab>
</tabset>

但它不起作用。请你帮助我好吗。水平选项卡也应用背景颜色。

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现它所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。
我在 html 中没有看到任何 class="nav-tabs"
它是有角度的选项卡，因此它使用 nav nav-tabs nav-stacked 类自动创建。您可以运行 plunker 并检查。
也许我可以为 horizantal 类编写 css 来覆盖它们。但这不是好办法。
您的 HTML 显示为 class="vertical"，但您的 CSS 显示为 .verticaltab

标签： css angularjs tabs angular-ui-bootstrap

【解决方案1】：

如果我正确理解了 Angular 输出，正如您所拥有的那样，级联适用于所有（:not(.horizantaltab) 永远不会匹配）。试试：

.verticaltab > .nav-tabs li.active > a {
    background: antiquewhite;
}

【讨论】：

【解决方案2】：

I am borrowing fromthe MDN site (Mozilla Developer Network) 表明 :not 告诉一个属性特别不能通过另一个选择器或类应用，但必须在其他地方用属性声明非类，否则它不会对页面产生任何影响：

p:not(.classy) { color: red; }
body :not(p) { color: green; }

<p>Some text.</p>
<p class="classy">Some other text.</p>
<span>One more text<span>

但是您在 css 中声明了一个 .nav-tabs 而不是 html，因此该类将永远不会应用。你到底想做什么？如果你想设置样式，设置规则，然后使用 :not 来创建规则的例外。

【讨论】：