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

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

基本上，我有一个很长的

p

和

h4

元素列表，我想在下一个

h4

元素之前为每一个

p

元素设计样式。例如：

<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就可以实现这样的效果吗？

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

更多关于

更多关于

---

关于使用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;
}

更多关于

更多关于

更多关于

仅凭CSS就可以实现这样的目标吗

还没有

如果实现了，那么您将能够使用：

!p + h4 {
    ...
}

然而，该规范仍处于早期起草状态，因此实现还有很长的路要走。你最好暂时利用课堂

仅凭CSS就可以实现这样的目标吗

还没有

如果实现了，那么您将能够使用：

!p + h4 {
    ...
}

然而，该规范仍处于早期起草状态，因此实现还有很长的路要走。您最好暂时使用类。

您可以使用伪类（如果您知道重复的模式，最好使用伪类）

CSS

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

或其他

在

h4

元素前面的每个

p

元素中添加一个类也是一个很好的方法。

您可以使用伪类（如果您知道重复的模式，最好使用伪类）

CSS

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

或其他

---

在

h4

元素前面的每个

p

元素中添加一个类也是一种很好的方法。

是，但需要添加类名。在我看来，这似乎是不可能的。这个问题要求兄弟姐妹，我的问题是要求在另一个元素之后的最后一个元素。完全不同的问题。例如，这将找不到最后一个

p

标记。

另一个元素之后的最后一个元素===前一个兄弟姐妹

我错了吗？老实说，它们听起来是一样的。然后，请参考我原始问题中的示例，向我解释一下，如果最后一个

p

标记后面没有

h4

标记，那么它将如何设置样式？他们是完全不同的问题……不，我说的是这样的

p:nth child（4），p:nth child（7），p:last child

。。但在这种情况下，仍然提及容器将是好的。或者只是向HTML中的那些元素添加一个类，或者动态地添加一个类，如Rohit在下面的文章中所示。是的，但是您需要添加类名。在我看来，这似乎是不可能的。这个问题要求兄弟姐妹，我的问题是要求在另一个元素之后的最后一个元素。完全不同的问题。例如，这将找不到最后一个

p

标记。

另一个元素之后的最后一个元素===前一个兄弟姐妹

我错了吗？老实说，它们听起来是一样的。然后，请参考我原始问题中的示例，向我解释一下，如果最后一个

p

标记后面没有

h4

标记，那么它将如何设置样式？他们是完全不同的问题……不，我说的是这样的

p:nth child（4），p:nth child（7），p:last child

。。但在这种情况下，仍然提及容器将是好的。或者只是向HTML中的那些元素添加一个类，或者像Rohit在下面的帖子中所显示的那样动态地添加一个类。这个问题没有标记javascript或jQuery，但是因为CSS不起作用，应该允许使用vanilla js。这个问题没有标记javascript或jQuery，但是CSS不起作用，应该允许使用vanilla js。非常有趣，谢谢+非常有趣，谢谢+1.