上下文：我正在尝试使用无线电黑客来切换.tabinfo div中查看的文本，但我的无线电和{{我想要更改的{1}}属性位于不同的div中。
问题：是否可以使用纯CSS选择器通过单击嵌套广播来选择display元素？
参考代码：我使用的是bootstrap布局并创建了以下HTML代码：
#text以下CSS：
<div class="col-xs-2">
<input id="tab1" type="radio" name="tabs">
<label for="tab1">Foo</label>
</div>
<div class="col-xs-2">
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Bar</label>
</div>
<div class="col-xs-2">
<input id="tab3" type="radio" name="tabs" checked>
<label for="tab3">Foo Bar</label>
</div>
<div class="col-xs-12">
<div class="tabinfo">
<div id="text1">
</div>
<div id="text2">
</div>
<div id="text3">
</div>
</div>
</div>
正如您可能已经猜到的，上述情况不起作用，因为label {
border: solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom: none;
border-color: rgb(211,211,205);
border-width: 2px;
color: rgb(12,174,175);
background-color: rgb(247,247,247);
}
input:checked + label {
background-color: #fff;
color: rgb(94,94,94);
}
label:hover {
cursor: pointer;
}
.tabinfo {
border: solid;
border-color: rgb(211,211,205);
border-width: 2px;
border-top-right-radius: 10px;
}
#tab1:checked ~ .col-xs-12 .tabinfo #text1,
#tab2:checked ~ .col-xs-12 .tabinfo #text2,
#tab3:checked ~ .col-xs-12 .tabinfo #text3 {
display: block!important;
}
和#text位于不同的div中。是否有任何解决方法或任何解决方案没有打破Bootstrap布局？
提前致谢。
答案 0 :(得分：1)
可以使用脆弱的解决方案，但这涉及将<input>元素从<label>元素移开，并指定任何HTML更改的一个要求是任何更改
...不会破坏[Bootstrap]布局。
我不认为我的更改打破了这种布局，但我不完全确定，所以你需要自己评估一下。
除了这个序言之外，我已将HTML修改为以下内容：
<input id="tab1" type="radio" name="tabs" />
<input id="tab2" type="radio" name="tabs" />
<input id="tab3" type="radio" name="tabs" />
<div class="col-xs-2">
<label for="tab1">Foo</label>
</div>
<div class="col-xs-2">
<label for="tab2">Bar</label>
</div>
<div class="col-xs-2">
<label for="tab3">Foo Bar</label>
</div>
<div class="col-xs-12">
<div class="tabinfo">
<div id="text1">
</div>
<div id="text2">
</div>
<div id="text3">
</div>
</div>
</div>
这种方法允许我们利用<label>元素检查/取消选中其关联的<input>元素的能力，无论文档位于何处（只要for } attribute标识关联id）的<input>;将<input>元素放在内容之前允许我们使用兄弟组合器来查找包含相关内容的元素。
假设您希望保留被检查的<input>的视觉效果，或者我们也使用CSS生成的内容来模拟已检查或未检查的无线电;但是，这可以使用一些微调：
/* Here we hide all <div> elements within the .tabinfo
element, and also all <input> elements whose 'name'
attribute is equal to 'tabs' and whose 'type' is
equal to 'radio': */
.tabinfo div,
input[name=tabs][type=radio] {
display: none;
}
/* This styles the generated content of the ::before
pseudo-element to show the attribute-value of the
element's 'id' attribute; purely for the purposes
of this demo: */
div[id^=text]::before {
content: attr(id);
}
/* Styling the generated content, the ::before pseudo-
element, of the <label> elements, in order to
emulate the moved radio <input>: */
label::before {
/* An empty string, content is required in order for
the pseudo-element to be visible on the page: */
content: '';
/* To allow the pseudo-element to have specified
width and height values: */
display: inline-block;
height: 1em;
width: 1em;
/* To include the border, and any padding, widths
in the calculations for the element's size: */
box-sizing: border-box;
background-color: #eee;
border: 1px solid #999;
/* In order for the pseudo-radio to have a round
shape/border: */
border-radius: 50%;
margin-right: 0.2em;
}
/* This selector styles the <label> element whose 'for'
attribute is equal to 'tab1', which is a child of
the div.col-xs-2 element which itself is a general
sibling of the #tab1 element when that element is
checked; this is the 'checked' style of the pseudo-
'radio' generated content: */
#tab1:checked~div.col-xs-2>label[for=tab1]::before {
background-color: #666;
box-shadow: inset 0 0 0 3px #fff;
}
/* This selects the element with an id of 'text1',
inside of a <div> with the class of 'col-xs-12',
which is a general sibling of the '#tab1' element
when that element is checked: */
#tab1:checked~div.col-xs-12 #text1 {
/* Here we make the content of that element visible: */
display: block;
}
#tab2:checked~div.col-xs-2>label[for=tab2]::before {
background-color: #666;
box-shadow: inset 0 0 0 3px #fff;
}
#tab2:checked~div.col-xs-12 #text2 {
display: block;
}
#tab3:checked~div.col-xs-2>label[for=tab3]::before {
background-color: #666;
box-shadow: inset 0 0 0 3px #fff;
}
#tab3:checked~div.col-xs-12 #text3 {
display: block;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<input id="tab1" type="radio" name="tabs" />
<input id="tab2" type="radio" name="tabs" />
<input id="tab3" type="radio" name="tabs" />
<div class="col-xs-2">
<label for="tab1">Foo</label>
</div>
<div class="col-xs-2">
<label for="tab2">Bar</label>
</div>
<div class="col-xs-2">
<label for="tab3">Foo Bar</label>
</div>
<div class="col-xs-12">
<div class="tabinfo">
<div id="text1">
</div>
<div id="text2">
</div>
<div id="text3">
</div>
</div>
</div>
从形成的规则可以看出，为了显示与已检查的<input>元素相关的元素，这些规则需要一些精确和重复，因为CSS没有this的概念，因此，给定{ {1}}属性的值可能设置为相关data-affectedby的{{1}}，我们无法按照以下方式制定规则：
id答案 1 :(得分：0)
在使用不同级别的div时，这将是非常困难的（也许是不可能的）。
如果你将HTML结构展平一点，你就可以获得接近你想要的东西。但请注意，它意味着摆脱大多数Bootstrap助手布局div。
示例HTML：
<input id="tab1" type="radio" name="tabs">
<label for="tab1">Foo</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Bar</label>
<input id="tab3" type="radio" name="tabs" checked>
<label for="tab3">Foo Bar</label>
<div id="text1" class="tabinfo">text1</div>
<div id="text2" class="tabinfo">text2</div>
<div id="text3" class="tabinfo">text3</div>
示例CSS：
label {
border: solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom: none;
border-color: rgb(211,211,205);
border-width: 2px;
color: rgb(12,174,175);
background-color: rgb(247,247,247);
}
input:checked + label {
background-color: #fff;
color: rgb(94,94,94);
}
label:hover {
cursor: pointer;
}
.tabinfo {
display:none;
}
#tab1:checked ~ #text1{
display:block;
}
#tab2:checked ~ #text2{
display:block;
}
#tab3:checked ~ #text3{
display:block;
}
请参阅我在此处创建的示例：https://plnkr.co/edit/DyID8me4bM7VPCI9l6Cg?p=preview