在h之后选择p的所有第一次出现

Question

我想选择<p>每个之后<h1>以及<h2>当所有这些标签都是sibligs时的第一个出现(即所有标签都属于同一个div).段落不一定立即跟随标题; 中间可能会有一些图像,表格或其他元素.目的是为这些段落的第一个字母设置样式.我不想使用javascript或jQuery.这只能用css选择器吗？

例如,我会有类似的东西:

<div>
<h1>Bla</h1>
<p class="Testo">BlaBla.</p> <!-- #1 -->
<p class="Testo">BlaBla.</p> <!-- #2 -->
<h2>BlaBlaBla</h2>
<p class="Testo">BlaBla.</p> <!-- #3 -->
<h2>BlaBlaBla</h2>
<div>
    <img>
    <p></p>                  <!-- #4 -->
</div>
<p class="Testo">BlaBla.</p> <!-- #5 -->
</div>

我想选择#1,#3和#5.我现在迷路了,并感谢一些帮助.

如果我使用:h1 + p.Testo:first-letter并且h2 + p.Testo:first-letter它没有选择#5,因为它没有立即跟随标题.

如果我使用:h1 ~ p.Testo:first-letter和h2 ~ p.Testo:first-letter它也选择2号,因为这也是同级h1.

如果我使用h1 > p.Testo:first-letter和h2 > p.Testo:first-letter它选择没有他们,因为他们是兄妹,而不是孩子; 对于后代选择器h1 p.Testo:first-letter和h2 p.Testo:first-letter

如果我使用:h1 ~ p.Testo:first-of-type:first-letter和h2 ~ p.Testo:first-of-type:first-letter它仅选择#1 ...

Answer 1

我有点晚了,但对于未来的人们期待着解决这个问题,你可以实际使用CSS3伪选择::第一的类型 (在这里阅读更多) 这样的

p:first-of-type {
    color: #f00;
}

如果你想让它成为div你可以使用的第一个特定的

div#id_div > p:first-of-type {
    background: #ff0000;
}

这应该做的伎俩!希望这有助于任何人仍在寻找这个答案

Answer 2

“H 后第一次出现 X”选择器不存在。

最接近的纯 CSS 解决方案是（添加class="h"到您的每个<h1>,<h2>元素，或重复h1, h2, ..的选择器）：

演示：http : //jsfiddle.net/dC4sB/1/

.h + p.Testo,
.h + *:not(p.Testo) + p.Testo,
.h + *:not(p.Testo) + *:not(p.Testo) + p.Testo,
.h + *:not(p.Testo) + *:not(p.Testo) + *:not(p.Testo) + p.Testo {
   /* repeat + *:not(p.Testo) for each additional sibling */
    color: red;
}