CSS: Kann ich jede Art von Element auswählen, die nicht innerhalb einer bestimmten Klasse sind?

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

  •  06-07-2019
  •  | 
  •  

Frage

Lassen Sie sagen, ich diese Seite bekommen: 

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

Und ich möchte alle H1 Elemente auszuwählen, die nicht innerhalb der wrapper-Klasse. Wie kann ich das mit CSS? Ich will nicht, eine „Lösung“ wie 

body h1, body .class h1 {style definitions}

Ich bin mehr nach irgendeiner Art folgt aus: 

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

Gibt es eine Möglichkeit, dies zu tun?

War es hilfreich?

Lösung

Was ist, wenn Sie tat etwas wie folgt aus: 

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

In h1.class würden Sie alles außer Kraft setzen, die Sie in Ihrer h1 Regel definiert.

Hier ist ein Beispiel: 

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

In diesem Beispiel habe ich effektiv alle divs gezielt, die keine Klasse von foo haben.

Andere Tipps

Sie können nicht tun, was Sie mit CSS sind gefragt. Die ganze Idee rund um CSS ist die Kaskade, und was Sie wollen, ist zu tun Arbeit gegen die Strömung der Kaskade.

Die Arbeit mit den Gezeiten zu tun regelmäßige CSS: 

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

Sie können den Universal-Selektor * globalen Styling anwenden und dann ein verschachtelte Universalselektor anwenden: .wrapper * rückgängig macht das Styling ursprünglich angewandt 

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

.wrapper * {font-weight:normal; border: 0px solid white;}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top