html - 我可以影响我目前纯粹使用 CSS 的 div 之外的元素吗？

Question

上下文:我正在尝试使用radio hack 来切换在.tabinfo div 中查看的文本，但是我的 radio 和我要更改其 display 属性的文本位于不同的 div 中。

问题:是否可以使用纯 CSS 选择器通过单击嵌套单选按钮来选择 #text 元素？

引用代码:我正在使用 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

可以使用脆弱的解决方案，但这涉及移动 <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>元素检查/取消检查其关联的能力 <input>元素，无论它在文档中的位置如何(只要 for 属性标识关联的 id 的 <input> )；放置 <input>内容前面的元素允许我们使用兄弟组合器来查找包含要设置样式的相关内容的元素。

假设您希望保留 <input> 的视觉效果被选中，或者以其他方式，我们还使用 CSS 生成的内容来模拟选中或未选中的 radio ；不过，这可能需要一些微调:

/* 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其值可能设置为 id 的属性的相关<input> ，我们无法制定如下规则:

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