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 クラス内にないすべての 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 のクラスを持たないすべての div を効果的にターゲットにしています。

他のヒント

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