我想选择< p>的第一次出现.在每个< h1>之后和< h2>当所有这些标签都是sibligs时(即所有这些标签都属于同一个div).段落不一定立即跟随标题;中间可能会有一些图像,表格或其他元素.
目的是为这些段落的第一个字母设置样式.我不想使用 javascript或jQuery.这只能用css选择器吗？
目的是为这些段落的第一个字母设置样式.我不想使用 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：第一个字母和h2 p.Testo：第一个字母它不选择#5,因为它没有立即跟随标题.
如果我使用：h1~p.Testo：第一个字母和h2~p.Testo：第一个字母它也选择#2,因为它也是h1的兄弟.
如果我使用h1> p.Testo：第一个字母和h2> p.Testo：首先它不选择任何一个,因为他们是兄弟姐妹,而不是孩子;同样适用于后代选择器h1 p.Testo：第一个字母和h2 p.Testo：第一个字母
如果我使用：h1~p.Testo：first-of-type：first-letter和h2~p.Testo：first-of-type：first-letter只选择#1 …
解决方法
“H之后的第一次出现X”选择器不存在.
最接近的纯CSS解决方案是(为每个< h1>,< h2>元素添加class =“h”,或重复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;
}
