在一个特定元素之后设置任何元素的样式

Question

以随机顺序给出一组段落

<article>
  <p class='red'> red </p>
  <p class='green'> green </p>
  <p class='blue'> blue </p>
  <p class='purple'> purple </p>
</article>

两条规则：

• 放在红色后面的所有段落都会有一个backround-color红色。
• 蓝色之后的所有段落都会显示color蓝色

如何使用CSS做到这一点？

请注意，顺序是随机的，并且无法在html中插入一些自定义类。

下面的示例用于显示结果的外观，其代码不正确。

<article>
  <p class='red'> red </p>
  <p class='green' style='background-color:red;'> green </p>
  <p class='blue' style='background-color:red;'> blue </p>
  <p class='purple' style='background-color:red; color:blue;'> purple </p>
</article>

Answer 1

使用General sibling combinator ~定位所有下一个相邻兄弟姐妹：

.red ~ p {
  background-color: red;
}

.blue ~ p {
  color:blue;
}

<article>
  <p class='red'> red </p>
  <p class='green'> green </p>
  <p class='blue'> blue </p>
  <p class='purple'> purple </p>
</article>