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

Question

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

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

在我的.css我有以下选择器来设置h4元素的样式.上面的HTML代码只是整个代码的一小部分; 还有几个div属于一个影子箱的东西:

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

所以,我的h4元素有正确的样式,但我也希望p在HTML中设置样式.

CSS选择器有可能吗？如果是,我该怎么做？

Answer 1

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

这称为相邻的兄弟选择器.

Answer 2

对于您的文字示例,您需要使用相邻的选择器(+).

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>

不幸的是,它已知在IE 7+中有错误.

Answer 3

试图解决这种类型的事情时,只需点击这个.

我做了一个选择器来处理除了p之外的其他元素.

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

希望这有助于找到它的人:)

Answer 4

为初学者简化：

如果您想选择紧随另一个元素之后的元素，请使用+选择器。

例如：

div + p该+元素选择紧邻元素<p>之后放置的所有元素<div>

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