使用CSS选择器选择标签 [英] Select label using CSS selector

问题描述

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

I'm using a radio button to create tabs from CSS only. The problem I'm running into is that I can't figure out how to select the <label> that references the radio button. I keep the labels separate from the content so that I can lay them out as tabs:

<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中，以便在单击标签时可以选择它。但是，我不能反向：

The content panes are layed out below. The input button is kept inside the content div so that I can select it when the label is clicked. But, I can't go in reverse:

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

我想要完成的问题，我的问题是：标签背景颜色，当给定这个布局无线电输入点击？

What I'm trying to accomplish and my question for this issue would be: How can I change the label background color when the radio input is clicked given this layout?

如果你想玩这个生活，我提供了一个小提琴：
http://jsfiddle.net/mjohnsonco/6KeTR/

I have provided a fiddle if you want to play with this live: http://jsfiddle.net/mjohnsonco/6KeTR/

推荐答案

您可以通过CSS实现这一点，但只有重组的HTML和更丑陋的CSS。

You can achieve this by CSS only, but only with restructured HTML and more ugly CSS.

看看这个例子： a href =http://jsfiddle.net/kizu/6KeTR/16/ =nofollow> http://jsfiddle.net/kizu/6KeTR/16/

Look at this example: http://jsfiddle.net/kizu/6KeTR/16/

在这里，你应该将所有的输入从容器中移动到他们将要放置的块的前面。在这种情况下，您可以使用〜组合器和一些第n个子选择器来定位选项卡及其内容的父项：

Here you should move all the inputs out of their containers to the place where they would immediately precede the blocks you want them to affect. In that case, you place it so you could then target the parents of the tabs and their content using ~ combinator, and some nth-child selectors like this:

#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-only事物更像是概念验证不是那么可维护和可用作他们的JS同行。所以我建议使用它们只是为了乐趣：）

However, such CSS-only thingies are more like proof-of-concept — they are not that maintainable and usable as their JS counterparts. So I'd recommend using them only for fun :)

这篇关于使用CSS选择器选择标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！