我正在尝试使用各种“组合器”选择器将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后,我尝试了其他用于'characters'元素的访问器(
在这种情况下使用的正确标记是什么?

编辑:非工作代码here

最佳答案

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

您不能使用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或类)。

10-05 20:55
查看更多