html - 无法正确引用 div 的子元素

Question

我正在尝试使用各种“组合器”选择器将 CSS 应用于子 div 中的元素，但它们似乎都不起作用。工作代码是: here

出于我的页面的目的，我想将单选按钮放入它们自己的 div 中，以便我可以将它们作为一个单独的菜单。

但是，当我将菜单放入其自己的 div 中时，我似乎无法让 CSS 访问元素“字符”。

#original:checked ~.characters [data-teams~="original"] h2,
#force:checked ~ .characters [data-teams~="force"] h2,
#factor:checked ~ .characters [data-teams~="factor"] h2,
#hellfire:checked ~ .characters [data-teams~="hellfire"] h2 {
display: block;
}

如您所见，“characters”元素是使用波浪号 (~) 组合符访问的，当“characters”元素与单选按钮位于同一 div 中时，该组合符工作正常。

将单选按钮放入它们自己的 div 后，我尝试了“字符”元素(<、+ 等)的其他访问器，但似乎无法访问该元素。

在这种情况下，正确的标记是什么？

编辑:非工作代码 here

Answer 1

您只能使用 ~ 和 + 访问元素的兄弟元素。这就是为什么它们被称为兄弟组合器——线索就在名字中……

你不能用 CSS 在 DOM 中引用“向上”——但你需要这样做才能完成你想要的，因为从输入元素你必须首先“向上”到 div，在您可以选择与该 div 处于同一级别的其他元素之前。

然而，您可以做的是将 input 字段保留在能够选择其兄弟项所需的级别上 – 并将 label 元素移动到其他位置。标签在点击时触发单选元素状态的切换，但它们不需要特定的 DOM 结构来执行此操作，因为它们的 for 属性在输入和标签之间建立了必要的联系。

然后您仍然需要修改您的代码以根据选定的单选按钮稍微格式化标签——但像这样的东西是可行的:http://codepen.io/anon/pen/PqRKWm

输入字段已移至标签之前，标签现在分组在一个 div 中——这使得基于单选按钮的 :checked 状态格式化以下内容仍然以相同的方式工作。

现在要根据所选单选按钮设置标签格式，您需要先“进入”div，然后选择右侧单选按钮的标签元素——这需要复制这些选择器，以便您有一个用于每个输入标签组合:

input#original:focus ~ div label[for=original],
input#force:focus ~ div label[for=force],
input#factor:focus ~ div label[for=factor],
input#hellfire:focus ~ div label[for=hellfire]{
  outline: 1px solid #fff;
}

input#original:checked ~ div label[for=original]::before,
input#force:checked ~ div label[for=force]::before,
input#factor:checked ~ div label[for=factor]::before,
input#hellfire:checked ~ div label[for=hellfire]::before {
  background-color: #c00;
}

当然，此时您可能想使用更具体的选择器，以仅针对特定 div 元素内的标签(通过在选择器中使用额外的 id 或类)。