问题:
我想选中所有相邻的红色框,并将其背景颜色更改为黄色。但应用的css不起作用。
期望结果:
第二个红色框应变成黄色。
尝试过的方法:
我尝试使用+
运算符选择相邻的元素,但它并没有给我期望的结果。
这是我用来选择相邻的1级元素的精确代码:
ul li > div.red + ul li > div.red {
background: yellow;
}
我的代码:
这是代码沙盒:https://codesandbox.io/s/divine-wave-1bjmp?file=/main.css
(翻译结果已按照格式要求返回,如有其他需要请告知)ul {
list-style-type: none;
}
ul li>div {
height: 100px;
width: 100px;
border: 1px solid black;
margin: 20px;
}
ul li>div.red {
background: red;
}
ul li>div.green {
background: green;
}
ul li>div.red+ul li>div.red {
background: yellow;
}
<ul>
<li>
<div class="red" />
</li>
<li>
<div class="red" />
</li>
<li>
<div class="green" />
</li>
<li>
<div class="red" />
</li>
</ul>
注意:
我不允许对HTML进行任何更改。这个问题应该使用纯CSS来解决。