使用CSS选择器中选择标签(Select label using CSS selector)

我用一个单选按钮，创建仅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/

Answer 1:

您可以通过CSS只，但只有重组HTML和更难看CSS实现这一目标。

请看下面的例子： http://jsfiddle.net/kizu/6KeTR/16/

在这里，你应该将所有的输入他们的容器来，他们马上会先于你想让他们影响块的地方。 在这种情况下，你把它，所以你能那么针对标签的使用父母和他们的内容~组合子，有的第n个孩子选择这样的：

#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同行。 因此，我建议你使用它们只是为了好玩:)

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

文章来源: Select label using CSS selector