使用 CSS 选择器选择标签答案

【问题标题】：Select label using CSS selector使用 CSS 选择器选择标签
【发布时间】：2014-08-09 18:14:49
【问题描述】：

我使用单选按钮仅从 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>

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

如果您想现场演奏，我提供了一个小提琴： http://jsfiddle.net/mjohnsonco/6KeTR/

【问题讨论】：

纯 CSS 解决方案？不是机会。使用当前可用的选择器，您的标签和表单元素之间无法建立任何关系。
@cimmanon：不完全正确。根据他需要的浏览器支持，他可以使用属性选择器：label[for="tab-1"] { /* rules */} 也就是说，他没有办法将收音机的状态与标签的状态联系起来，所以你是对的 :-)
有一个 CSS Tricks 的示例，与您的主要区别在于它们在每个相关的单选按钮旁边都有每个标签，而不是将其放在另一个 div 中，希望对您有所帮助：css-tricks.com/examples/CSSTabs/radio.php
@prodigitalson 对。如果标记不同（即，如果标签和收音机绝对是兄弟姐妹），则可以完成，但不能使用 OP 的标记完成。
是的，如果收音机和标签彼此相邻，这是可能的。我最终重新设计了我的布局以使其成为这种情况。所以，简而言之，我认为我的问题的答案是，目前仅使用纯 css 解决方案是不可能的。输入和标签必须至少在父/子或兄弟关系中彼此相邻。

标签： html css css-selectors

【解决方案1】：

您只能通过 CSS 来实现这一点，但只能使用重组的 HTML 和更丑陋的 CSS。

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

在这里，您应该将所有输入从它们的容器中移到它们将直接位于您希望它们影响的块之前的位置。在这种情况下，您可以放置它，这样您就可以使用 ~ 组合器和一些像这样的 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 对应物那样可维护和可用。所以我建议仅将它们用于娱乐:)

【讨论】：

【解决方案2】：

CSS

.bgcolor1{

background-color:#blue;

}
.bgcolor2{

background-color:green;

}
.bgcolor3{

background-color:red;

}

JQUERY

$('input[name=radio-set1]:checked', '#main').addClass(bgcolor1)

$('input[name=radio-set2]:checked', '#main').addClass(bgcolor2)

$('input[name=radio-set5]:checked', '#main').addClass(bgcolor3)

HTML

 <input id="tab-1" type="radio" name="radio-set1" class="tab-selector" checked="checked"/>
 <input id="tab-2" type="radio" name="radio-set2" class="tab-selector" checked="checked"/>
 <input id="tab-3" type="radio" name="radio-set3" class="tab-selector" checked="checked"/>

<label class="bgcolor1" for="tab-1">Tab 1</label>
<label class="bgcolor2" for="tab-2">Tab 2</label>
<label class="bgcolor3" for="tab-3">Tab 3</label>

【讨论】：

谁说过 jQuery？
你认为 css 有可能吗？据我所知，从来没有
我们知道我们无法选择使用 css 选择的单选按钮
是的，这个问题只与css有关，但感谢您的尝试。