Question

所以我只想在CSS中实现这一点，因为我知道在jQuery中它是多么简单。

基本上，我有一长串p和h4元素，我希望在下一个p之前设置每一个h4元素的样式。例如：

<h4>Heading</h4>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<h4>Heading</h4>
<p>Paragraph</p>
<p>Paragraph</p>
<h4>Heading</h4>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

在该列表中，每个最后p都需要在以下h4之前设置样式。

页面上p和h4标记的数量始终是随机的。

单独用CSS可以达到这样的效果吗？

Answer 1

单独用CSS可以达到这样的效果吗？

还没有。

如果subject selector得到实施，那么您就可以使用：

!p + h4 {
    ...
}

然而，该规范仍处于早期草案状态，因此实施是一种方法。你最好暂时使用课程。

Answer 2

使用jQuery

$(document).ready(function(){
    $('h4').prev('p').addClass('redCss'); // used to .prev and .next according to your requirement 
})

使用此课程

.redCss{

    color:red;
    font-size:14px;
    font-weight:bold;
}

<强> Demo

更多关于 .prev

的信息

更多关于 .next

的信息

更多关于 addClass

的信息

Answer 3

您可以使用:nth-child伪类（如果您知道重复模式，最好使用）。

<强> CSS

p:nth-child(4), p:nth-child(7){ color: red; }

Working Fiddle

或

在p元素之前的每个h4元素中添加一个类也是一个很好的方法。

如何在CSS中另一个特定元素之前设置最后一个元素的样式？

3 个答案: