我正在尝试使用各种“组合器”选择器将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或类)。