时间戳

首页 > 解决方案 > 我可以在查询组上使用 CSS 兄弟运算符吗？

css - 我可以在查询组上使用 CSS 兄弟运算符吗？

问题描述

我有以下 DOM 结构：

<div>
  <input type="checkbox" class="has-keyboard-focus" />
</div>
<div>
  <div class="fake-checkbox" />
</div>

仅当真正的复选框具有类时，我如何使用纯 CSS 定位伪复选框has-keyboard-focus？我试过了：

div input.has-keyboard-focus ~ div .fake-checkbox {
  border: 2px solid red
}

...但是，兄弟运算符左侧的部分似乎并未被视为组。相反，它希望div .fake-checkbox位于输入字段的级别。

如果可以的话，我会改变 DOM 结构。

标签： css

解决方案

推荐阅读