Question

我想说明了这个页面：

<body>
    <h1>Hello!</h1>
    <div class="wrapper">
        <div class="anotherclass">
            <h1>Another heading 1</h1>
        </div>
        <div class="yetanotherclass">
            <h1>Yet another heading 1</h1>
        </div>
    </div>
    <h1>Good bye!</h1>
    <div class="class">
        <h1>Good bye. And this time I mean it.</h1>
    </div>
</body>

我想选择不在H1 - 类中的所有wrapper个元素。我怎么能用CSS做到这一点？我不想要像

这样的“解决方案”

body h1, body .class h1 {style definitions}

我更喜欢某种形式：

h1:not(.wrapper > h1) {style definitions}

有没有办法做到这一点？

Answer 1

如果您做了类似的事情该怎么办：

h1 { /* rules for everything without the class */ }
h1.class { /* rules for everything with the class */ }

在h1.class中，您将覆盖在h1规则中定义的所有内容。

以下是一个例子：

<html>
    <head>
        <style type="text/css">
                div { color:#00f; }
                div.foo { color:#f00; }
        </style>
    </head>
    <body>
        <div class="foo">foo</div>
        <div>bar</div>
        <div>baz</div>
    </body>
</html>

在此示例中，我有效地定位了没有divs类的所有foo。

Answer 2

你不能用css做你所要求的。围绕css的整个想法是级联，而你想要做的就是对抗级联的流程。

与潮流一起做常规css：

h1 {style definitions}
.wrapper h1 {style definitions}

Answer 3

您可以使用通用选择器*应用全局样式，然后应用嵌套的通用选择器：.wrapper *来撤消最初应用的样式

* {font-weight:bold; border:thin solid red;}

.wrapper * {font-weight:normal; border: 0px solid white;}

CSS：我可以选择不属于特定类的每种类型的元素吗？

3 个答案: