css - 前の要素を指定するCSS：not（）セレクター

Question

これは非常に単純な質問であり、頭を悩ませることはできません。

私はこのような一連のdivを持っています：

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>Paragraph text</p>

<h2>Heading 3</h2>

<p>Paragraph text</p>

CSSでは、h1タグに続くh2タグを次のようにターゲットにできますが、このh1+h2{}ように使用することはできないようです:not()。たとえば、次のように使用します。

#text h2:not(h1+h2){
    margin-top:3em;
}

しかし、これはうまくいかないようです。私はある種の愚かな構文エラーを実行していますか、それともこれは不可能ですか？

score 5 · Accepted Answer

前に述べたように、CSSセレクターはその:not()中のコンビネーターを許可しないので、実際、それは構文エラーです。

この場合、+コンビネータの動作方法により、次のように、から移動して前を削除できるはずです。+ h2:not()h2

#text :not(h1) + h2 {
    margin-top: 3em;
}

最初の子になる場合h2（サンプルを考えると、そうではないはずです）、それに一致させたい場合は、セレクターを少し拡張する必要があります。

#text h2:first-child, #text :not(h1) + h2 {
    margin-top: 3em;
}

score 3 · Accepted Answer

CSSnot疑似セレクターでは、複雑なセレクターは使用できません。それについてあなたができることは何もありません。

必要な機能を取得するには、それをオーバーライドする必要があります。

#text h2 {
    margin-top:3em;
}

#text h1 + h2 {
    margin-top: 0;
}

2 に答える 2