我是否可以使用CSS影响当前所在div之外的元素？

上下文：我试图使用radio hack切换.tabinfo div中查看的文本，但我的radio和要更改其显示属性的文本位于不同的div中

问题：是否可以使用纯CSS选择器通过单击嵌套的收音机来选择文本元素

参考代码：我正在使用引导布局，并创建了以下HTML代码：

<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>

正如您可能已经猜到的那样，由于文本和制表符位于不同的div中，所以上述方法不起作用。在不破坏引导布局的情况下，是否有任何解决方法或解决方案

---

提前感谢。

当在不同级别上使用div时，这将非常困难，可能是不可能的

如果将HTML结构展平一点，您可能会获得与所需内容相近的内容。不过请注意，这意味着要去掉大多数引导助手布局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>

---

请参阅我在这里所做的示例：

可以使用脆性解决方案，但这涉及到将元素从元素中移开，并且您指定任何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>

福 酒吧 富吧

---

每个无线电输入应该影响哪些特定的“文本”？HTML完全可以更改吗？顺便说一句，只有一个共享一个共同名称的组的无线电输入属性可以被检查。每个带编号的选项卡都会影响数字文本，即如果选中tab1，则会显示text1等。只要不破坏引导布局，HTML就可以更改。谢谢您的输入。我知道一个没有嵌套div的解决方案是存在的，我只是想知道我是否能找到一个有嵌套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 {
  display:none;
}
#tab1:checked ~ #text1{
  display:block;
}
#tab2:checked ~ #text2{
  display:block;
}
#tab3:checked ~ #text3{
  display:block;
}

<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>