选择另一个元素之后的第一个出现的元素

113

我在页面上有以下HTML代码：

<h4>Some text</h4>
<p>
Some more text!
</p>

在我中，.css我有以下选择器来设置h4元素的样式。上面的HTML代码只是整个代码的一小部分；有div更多的包裹属于一个shadowbox：

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

因此，我的h4元素样式正确，但是我也想p在HTML中设置标签样式。

CSS选择器可能吗？如果是的话，我该怎么做？

html css css-selectors

— 抢
source

199

#many .more.selectors h4 + p { ... }

— 佛罗兹
source

1

一种替代方法是使用JS查找您的h4元素，转到下一个兄弟对象，然后向其中添加CSS类。使用jQuery，这简直就是$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');

— Phrogz 2011年

2

请注意，这仅适用于第一个元素之后的元素。如果要第二个html元素，可以将其链接起来，如下所示：#selector .original + h4 + p在.original元素后面的h4之后得到p。非常有用

— user1610743'4

30

对于您的文字示例，您需要使用相邻的选择器（+）。

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

但是，如果要选择所有连续的段落，则需要使用常规的同级选择器（〜）。

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

— 乔尔·梅隆
source

16

尝试解决此类问题时，请碰上此事。

我做了一个选择器来处理除p之后的元素。

.here .is.the #selector h4 + * {...}

希望这对找到它的人有所帮助:)

— 汤姆
source

9

使用*匹配标题中所述的任何元素。对我有帮助。

— James EJ 2013年

1

这是唯一适合该问题的答案。其他答案需要对先前元素的类型有先验知识。

— 雨果·维杰德

0

为初学者准备的简单：

如果要立即在另一个元素之后选择一个元素，请使用+选择器。

例如：

div + p“ +”元素选择所有<p>紧随<div>元素之后的元素

如果您想了解有关选择器的更多信息，请使用此表

— 特劳勒
source

0

我使用最新的CSS，“ +”对我不起作用，所以我最终得到了

：第一个孩子

— 尼科尔森
source