设置在div之后的p标签的样式(div不是p的父标签)

Question

这可能看起来很愚蠢..我想给p标签赋予样式，它位于某个div( div不是p标签的父标签).For示例之后

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

在这里，我想给p标记赋予样式。我不能把这些p标签放在另一个div.I中，我想给所有的p标签，然后是div相同的style.And，我也不能给p标签通用的样式，因为它会影响其他页面。有人能帮上忙吗？希望我的问题说清楚了……

Answer 1

你必须使用通用的同级选择器：

div ~ p {
    color: red;
}

查看这个jsFiddle：http://jsfiddle.net/yvdN6/4/。

您可以看到doc：

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

Answer 2

要仅选择直接p同级：

div + p {
    color: peru;
}

http://jsfiddle.net/yvdN6/

或者，要选择所有后续的p同级，请使用general sibling combinator

div ~ p {
color: peru;
}

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

Answer 3

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