Question

目前我有一个编码的调整单选按钮：

<label>
    <input type="radio" ... />
    <span>...</span>
</label>

一些CSS应用于输入后的第一个元素，一次检查如下：

input:checked + span {
    ...
  }

效果非常好：单击标签时，输入处于检查状态，CSS确实应用于span元素（更改文本颜色..）

虽然现在我在跨度之前添加了一张图片：

<label>
    <input type="radio" ... />
    <img ... />
    <span>...</span>
</label>

在之前的基础上添加了类似的CSS：

input:checked + img {
    ...
  }

现在发生的事情：单击图像时，图像将应用于正确的CSS。虽然现在不再改变跨度。我不明白是什么阻碍了。 +仍然具有相关性，因为在span和img两种情况下，>>> substrings = ['a', 'b', 'c'] >>> my_strings = ['_b_', '_c_', '_d_'] >>> [s for s in substrings if any(s in i for i in my_strings)] ['b', 'c']和any都是直接的后续元素（类型）

Answer 1

阻碍的是“+”选择器意味着“在 y 之后”选择 x 立即。一旦你将img放在中间，输入后不再是跨度。

您可能希望使用~通用兄弟组合子而不是+相邻兄弟组合子。

https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

您应该使用：

input:checked ~ span {
    ...
}

这就是你可以达到span元素的方法

当附加中间dom元素时+选择器不应用

2 个答案: