html - 使用 CSS 选择器选择标签

Question

我使用单选按钮仅从 CSS 创建选项卡。我遇到的问题是我不知道如何选择 <label>引用单选按钮。我将标签与内容分开，以便我可以将它们布置为标签:

<div class="tab-labels">
   <label for="tab-1">Tab 1</label>
   <label for="tab-2">Tab 2</label>
   <label for="tab-3">Tab 3</label>
</div>

内容面板如下所示。输入按钮保留在内容 div 内，以便我可以在单击标签时选择它。但是，我不能倒退:

<div class="content-container">
    <div class="tab details">
        <input id="tab-1" type="radio" name="radio-set" class="tab-selector" checked="checked"/>
        <div class="content">
            <p>Some content 1</p>                   
        </div>
    </div>
    <div class="tab details">
        <input id="tab-2" type="radio" name="radio-set" class="tab-selector"/>
        <div class="content">
            <p>Some content 2</p>                   
        </div>
    </div>
    <div class="tab details">
        <input id="tab-3" type="radio" name="radio-set" class="tab-selector"/>
        <div class="content">
            <p>Some content 3</p>                    
        </div>
    </div>
</div>

我想要完成的事情和我对这个问题的问题是:在给定此布局的情况下，单击单选输入时如何更改标签背景颜色？

如果你想现场演奏，我已经提供了一个 fiddle : http://jsfiddle.net/mjohnsonco/6KeTR/

Answer 1

您可以仅通过 CSS 实现此目的，但只能使用重构的 HTML 和更丑陋的 CSS。

看这个例子:http://jsfiddle.net/kizu/6KeTR/16/

在这里，您应该将所有输入从它们的容器中移出到它们将紧接在您希望它们影响的 block 之前的位置。在这种情况下，您放置它以便您可以使用 ~ 组合器和一些 nth-child 选择器来定位选项卡的父级及其内容:

#tab-1:checked ~ .content-container > .tab:first-child  > .content,
#tab-2:checked ~ .content-container > .tab:nth-child(2) > .content,
#tab-3:checked ~ .content-container > .tab:nth-child(3) > .content {}

但是，这种纯 CSS 的东西更像是概念验证——它们不像 JS 对应物那样可维护和可用。所以我建议仅将它们用于娱乐 :)