Question

当所有这些标签都是sibligs（即所有标签都属于同一个div）时，我想在每个<p>和<h1>之后选择<h2>的第一个出现位置。段落不一定立即跟随标题;中间可能会有一些图像，表格或其他元素。目的是为这些段落的第一个字母设置样式。我不想使用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，则会选择 none ，因为他们是兄弟姐妹，而不是孩子;后代选择器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伪选择器 :: first-of-type (read more here) 像这样

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;
}

Answer 3

我知道问题已得到解答，但使用sass也可能非常酷

h1, h2, h3, h4
{
    & + p
    {
        color:red;
    }
}

哪里＆amp;表示父元素，一旦编译，它将把它变成

h1 + p { color:red }
h2 + p { color:red }
h3 + p { color:red }
h4 + p { color:red }

Answer 4

使用h + p.Testo:first-letter

请查看this link我过去常常找到这种情况的答案。

修改（仔细重读后）

我现在看到你已经尝试了这一点，但是你想抓住第5个p，它可以通过在你要求的第5段之前输入空白<h>来选择...

h + p.Testo:first-letter, div + p.Testo:first-letter
{
  css code here
}

抱歉，我没有意识到你的html布局没有关注你的问题......

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

4 个答案:

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