css如何选择相邻的前一个元素？

Posted 2023-04-23

<div class="row">
<label for="...">aaa</label>
<input type="checkbox" id="..." name=".." value=".">
</div>
<div class="row">
<label for="...">bbb</label>
<input type="checkbox" id="..." name=".." value="." >
</div>
代码如上
想得到这样的效果：选中一个复选框，让前面的label元素的文字颜色改变。
我知道<label>和<input>如果调换位置的话，可以用相邻兄弟选择器来做效果，代码如下
input:checked+label
color: green;

勾选一个复选框后，label中的文字就会变成绿色。
但相邻兄弟选择器好像只能选择下一个相邻的元素。
如何做到选择上一个相邻的元素呢？或者添加别的css代码能达到改变前面的label元素文字颜色呢？
求助各位大神！

参考技术A input:checked~label
color: green;
追问

不好意思，这个好像不行。。
“~”也是选择后面的元素，并不能选择前面的元素

如何将 CSS 规则应用于直接相邻的兄弟元素？

【中文标题】如何将 CSS 规则应用于直接相邻的兄弟元素？

【英文标题】：How can I apply CSS rules to directly-adjacent sibling elements?

【发布时间】：2015-04-21 16:45:06

【问题描述】：

我了解如何使用:hover 选择器，但我想以类似的方式将规则应用于直接相邻的元素。例如，如果我在一个平面列表中有链接 A、B、C 和 D，我希望当我将鼠标悬停在 C 上时应用 B 和 D。

想到的最直观的方法是重叠<a>标签，以便将规则应用于相邻的文本节点，如下所示：

<a>A<a>B</a></a>

如果我将样式应用于第一个锚点，它应该会影响 A 和 B，等等。

我对同时兼容 HTML5、IE 和 Chrome 的解决方案感兴趣。

【参考方案1】：

首先，格式良好的 HTML 中的标签必须是自包含的——<a><b></a></b> 不正确。考虑一下，匹配的hrefs 将指向什么。如果将 B 包含在 A 的元素中，它将共享所有属性：设置其样式的属性和确定链接到何处的属性。您无法将它们分开应该表明这可能是错误的处理方式。规范地说，我们说 HTML 应该代表文档的 结构，而您要在此处更改的是 样式。

如果我们查看some CSS selector reference，我们会发现类似于:hover。 + 和 ~ 看起来应该很有用，但实际上为我们提供了所有之前和之后的元素，这并不是您想要的。

我认为最明智的方法是使用 JavaScript。查看this JSFiddle 进行演示。 （我在这里使用jQuery。）