css - + 添加中间 dom 元素时选择器不适用

<分区>

目前我有一个经过调整的单选按钮编码:

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

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

input:checked + span {
    ...
  }

效果非常好:单击标签时，输入进入选中状态，CSS 确实适用于 span 元素(更改文本颜色..)

虽然现在我在 span 之前添加了一张图片:

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

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

input:checked + img {
    ...
  }

现在发生的事情是:当图像被点击时，图像应用了正确的 CSS。虽然跨度现在不再改变。我不明白是什么阻碍了。 + 仍然相关，因为在这两种情况下 span 和 img 都是直接跟随的元素(属于它们的类型)

最佳答案

阻碍的是“+”选择器意味着“选择y之后立即的x”。一旦你得到了中间的 img，span 就不再紧跟在输入之后了。

您可能想使用 ~ 通用兄弟组合器而不是 + 相邻兄弟组合器。

关于css - + 添加中间 dom 元素时选择器不适用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48254237/

相关文章：

html - 右对齐元素向下移动