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

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元素的样式正确，但我也希望在HTML中设置p标记的样式。

CSS选择器可以实现吗？如果是，我该怎么做？

Answer 1

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

这称为adjacent sibling selector。

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>

It's known to be buggy in IE 7+ unfortunately

Answer 3

试图解决这类事情时，我只想点击这个。

我做了一个选择器，除了p。

之后处理元素

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

希望这可以帮助任何找到它的人：）

Answer 4

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

：第一个孩子