在兄弟元素上应用没有class和id的CSS

Question

我需要在CSS文件的以下div上应用不同的背景颜色,而不使用类或ID

<div>This is Blue</div>
<div>This is Yello</div>
<div>This is Red</div>

没有使用JavaScript或jQuery,有没有办法做到这一点

Answer 1

由于div的当前结构是Not Nested,因此使用CSS :nth-child()不合适.对于这种情况,我们可以Sibling Selector在CSS中使用present:

1. 相邻兄弟选择器(+)
   相邻的兄弟选择器选择所有与指定元素相邻的兄弟元素的元素.
   以下示例选择<p>紧跟<div>元素后面的所有元素:

   div + p {background-color:yellow; }

2. 通用兄弟选择器(〜)
   通用兄弟选择器选择作为指定元素的兄弟节点的所有元素.
   以下示例选择所有<p>元素的兄弟<div>元素:

   div~p {background-color:yellow; }

希望能帮助到你.