我可以影响 div 之外的元素吗？我目前只在 CSS 中？

Question

上下文：我正在尝试使用 无线电 hack 来切换在 .tabinfo div，但我的收音机和我想更改其 display 属性的文本位于不同的 div。

问题：是否可以通过单击嵌套收音机？

参考代码：我正在使用 bootstrap 布局并创建了以下 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>

以及以下 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 {
    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 和 #tab 位于不同的 div 中。在不破坏 Bootstrap 布局的情况下，是否有任何解决方法或解决方案？

提前致谢。

Answer 1

在不同层次上处理 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

Answer 2

可以使用脆弱的解决方案，但这涉及将 <input> 元素从 <label> 元素移开，并且您指定任何 HTML 更改的一个要求是任何更改

…does not break the [Bootstrap] layout.

我认为我的更改不会破坏布局，但我不完全确定，因此您需要自己评估一下。

除了序言，我已经将您的 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> 元素的能力来 check/uncheck 其关联的 <input> 元素，无论它在文档中的位置如何（只要for 属性标识关联 <input> 的 id）；将 <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>

JS Fiddle demo.

从为显示与选中的 <input> 元素相关的元素而形成的规则中可以看出，这些规则需要一定的精确度和重复性，因为 CSS 没有 this 的概念，因此，给定一个 data-affectedby 属性，其值可能设置为相关 <input> 的 id，我们不可能有如下规则：

input[id^=tab]:checked ~ .col-xs-12 [data-affectedby=this.id]

我可以影响 div 之外的元素吗？我目前只在 CSS 中？

Can I affect an element outside the div I am currently in purely with CSS?

css

css-selectors

css-hack

radio-button

twitter-bootstrap