1

私が尋ねる理由は、CSS で表示および非表示にできるセクションを、プレーンな Markdown でレンダリングされたドキュメントに含めようとしているからです。レンダリングされた出力は次のようになります。

<h2>Hello</h2>

<p>content</p>
<p>more content</p>
<h2>Hello</h2>

<p>content not in a section</p>
<p>and neither is this</p>

<h2>World</h2>

<p>even more content</p>
<p>...whatever</p>

<h3>Title</h3>
<p>some stuff</p>

<h2>World</h2>

<p>...another paragraph</p>

<h2>Again</h2>
<p>more stuff</p>
<p>...and more</p>
<h2>Again</h2>

また、セクション 1 タグの間およびセクション 1 タグを含むすべてを非表示/表示できるようにしたいと考えてい<h2>ます。

私は次のようなことを考えていました：

h2 ~ p {
    ...
}

しかし、これは明らかに次の h2 タグで停止しません。これはおそらく不可能だと思いますが、何か見逃した場合に備えて尋ねると思いました.

編集明確にするために、多くのh2要素が存在する可能性があり、他のh?要素も同様に存在する可能性があります。h3

編集次のCSSで何かを機能させることができました

h2:nth-of-type(2n+1) {
    color: blue;
}
h2:nth-of-type(2n) {
    color: red;
}

h2:nth-of-type(1) ~ *:not(h2) {
    color: purple;
}
h2:nth-of-type(2) ~ *:not(h2) {
    color: black;
}

h2:nth-of-type(3) ~ *:not(h2) {
    color: purple;
}
h2:nth-of-type(4) ~ *:not(h2) {
    color: black;
}

h2:nth-of-type(5) ~ *:not(h2) {
    color: purple;
}
h2:nth-of-type(6) ~ *:not(h2) {
    color: black;
}

h2:nth-of-type(7) ~ *:not(h2) {
    color: purple;
}
h2:nth-of-type(8) ~ *:not(h2) {
    color: black;
}

h3 {
    color: black;
}

それは厄介ですが、マークダウン HTML で私がやろうとしていることはかなり厄介です。色は、表示/非表示の代用であり、それらをターゲットにできることを示しています。jsFiddleを参照してください

4

2 に答える 2

3

:not() としてセレクターを使用する場合、それは方法かもしれません

http://codepen.io/anon/full/mxasv

古いブラウザの場合、polyfill/jQuery を使用して、いくつかのリンクを納得させますか?

css :target、not()、および [tilde] 兄弟セレクターのポリフィル?

http://api.jquery.com/not-selector/

http://api.jquery.com/not/

polyfill/jQuery は必要ありません。CSS2.1 は 15 年前のものですか?

于 2013-07-04T20:55:38.550 に答える
3

生成された HTML 全体を 1 つの要素 (たとえばbody、またはdiv)にカプセル化できると仮定します。

<body>

<h2>Hello</h2>
<p>content</p>
<p>more content</p>

<h2>World</h2>
<p>even more content</p>
<p>...whatever</p>

</body>

CSS では、以下h2を使用して要素をターゲットにすることができ:nth-of-type()ます。

h2:nth-of-type(1) {
    color: red;
}
h2:nth-of-type(2) {
    color: blue;
}
h2:nth-of-type(1) ~ p {
    color: purple;
}
h2:nth-of-type(2) ~ p {
    color: orange;
}

jsFiddleを参照してください。ただし、これはかなり醜い解決策であり、 をサポートするすべてのブラウザーで適切に機能するかどうかは不明でnth-of-typeあり、ソースの順序に依存していることを認識してください。

于 2013-07-04T19:39:05.940 に答える