为一个不是p标签的div后面的p标签设置样式。

Question

这可能看起来很愚蠢… 我想给一个特定的 div 后面的 p 标签加上样式（这个 div 并不是 p 标签的父级元素）。例如：

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

我想给p标签添加样式，但是我不能把这些p标签放在另一个div中。我想让所有跟随div的p标签拥有相同的样式。同时，我也不能普遍地给p标签添加样式，因为这会影响其他页面。有没有人能帮忙？希望我的问题表述清楚了...

- Midhun Mathew

---

这篇文章可以帮助你通过CSS处理下一个元素。 - Shijin TR

如果您能展示整个页面的代码，那么说起来会更容易。 - Sowmya

固有的根本问题在于你的 HTML 结构不正确。如果你使用 <article>、<section> 和 <header> 标签正确地分组内容，那么你就不会遇到现在面临的问题。 - Niels Keurentjes

@NielsKeurentjes 使用文章/部分/标题而不是div/p标签有什么变化吗？您不知道div实际包含什么内容，它可能包含图库或用作多列内容的钩子。如果内容是动态生成的，则标签可能无法更改。 - cimmanon

@cinnamon，通过语义相关内容的分组，可以将样式规则分组。如果您必须选择“某个元素后面的所有元素”，则应该从一开始就将它们放在自己的容器中，因为它们显然被认为是一个组。 - Niels Keurentjes

Answer 1

选择仅为 p 的直接兄弟：

div + p {
    color: peru;
}

http://jsfiddle.net/yvdN6/

使用一般同级组合器，可以选择所有后续的p同级元素。

div ~ p {
color: peru;
}

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

- Adrift

---

我认为OP想要样式化所有接下来的段落，而不仅仅是像您的代码一样仅仅样式化下一个。 - Samuel Caillerie

@SamuelCaillerie 你明白了...那就是我想要的。 - Midhun Mathew

@Adrift 你的答案也几乎正确。但它只选择了直接的 p 标签。但我接受的答案选择了 div 后面的所有 p 标签。 - Midhun Mathew

Answer 2

你需要使用通用兄弟选择器：

：

div ~ p {
    color: red;
}

请参考这个 jsFiddle： http://jsfiddle.net/yvdN6/4/。

你可以查看这个文档：

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

- Samuel Caillerie

---

非常感谢，我之前不知道还有这种选择元素的方法。非常感谢。 - Midhun Mathew

你为什么称它为相邻兄弟选择器，但又引用了一个说兄弟不必相邻的引用？ - BoltClock

@BoltClock：是的，抱歉，我打字有点快...我已经编辑了我的答案。 - Samuel Caillerie

Answer 3

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

- Abdallah Barghouti

---

这只会为父级 div 中的 p 标签添加样式。 - user1157393

这会给出站点中每个页面中的所有 p 标签，对吗？ - Midhun Mathew

这里“div”不是“p”的父元素。 - Midhun Mathew