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

StackOverflow https://stackoverflow.com/questions/1009094

  •  06-07-2019
  •  | 
  •  

题

我想说明了这个页面：

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

我想选择不在 wrapper -class中的所有 H1 元素。我怎么能用CSS做到这一点？ 我不想要一个“解决方案”。像

body h1, body .class h1 {style definitions}

我更喜欢某种形式：

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

有没有办法做到这一点？

有帮助吗？

解决方案

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

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>

在这个例子中，我有效地针对没有 foo 类的所有 divs 。

其他提示

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

与潮流一起做常规css：

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

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

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

.wrapper * {font-weight:normal; border: 0px solid white;}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top