Question

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

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

但是，当我将菜单放入自己的div时，我似乎无法让CSS访问元素'characters'。

#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之后，我尝试了'characters'元素的其他访问器（＆lt;，+等），但似乎没有任何东西可以访问该元素。

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

编辑：非工作代码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或类）。

无法正确引用div的子元素

1 个答案: