设置在div之后的p标签的样式（div不是p的父级）

Question

这可能看起来很愚蠢..我想为p标记提供样式，该标记位于某个div之后（div不是p的父级标签）。例如

<div>Hai</div>
<p>Hello</p>
<p>How are you?</p>

这里我想给p标签添加样式。我不能将这些p标记放在另一个div中。我想提供所有p标记，后跟div相同的样式。我也不能将样式赋予{ {1}}标签通用，因为它会影响其他网页。有人可以帮忙吗？希望我对我的问题很清楚...

Answer 1

仅选择即时p兄弟：

div + p {
    color: peru;
}

http://jsfiddle.net/yvdN6/

或者选择所有后续p个兄弟姐妹，请使用general sibling combinator

div ~ p {
color: peru;
}

http://jsfiddle.net/yvdN6/7/

Answer 2

您必须使用通用兄弟选择器：

div ~ p {
    color: red;
}

请参阅此jsFiddle：http://jsfiddle.net/yvdN6/4/。

您可以看到doc：

  

元素不必是相邻的兄弟元素，但它们必须具有相同的父元素，div元素必须在文档源中的p元素之前出现。

Answer 3

<style type="text/css">
div + p{
Styles here
}
</style>