微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css – 选择h之后p的所有首次出现

我想选择< 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:第一个字母和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;
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。