Question

我问的原因是，我试图在一个简单的Markdown渲染文档中创建可以用CSS显示和隐藏的部分。渲染的输出可能是这样的：

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

Answer 1

假设您可以将整个生成的HTML封装到单个元素中（例如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中，您可以使用:nth-of-type()：

定位h2元素

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的所有浏览器，并且它依赖于源代码。

Answer 2

如果你使用选择器：not（），它可能是一种方式

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

旧浏览器使用polyfill / jQuery 说服你，一些链接？

Polyfill for css :target, not(), and [tilde] sibling selectors?

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

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

很快安静，你不需要polyfill / jQuery，CSS2.1已经15岁了吗？

有没有办法将兄弟姐妹分成几个部分

2 个答案: