Question

我有标签，我想根据标签下方某些div内的单选按钮的:checked状态进行样式设置。你可以建议我一个选择器，这样如果选中了一个单选按钮，我可以找到相应的标签吗？

这是我的代码：

<div class="clients">
        <!--labels i wanna style-->
            <label for="slide-1-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img02.jpg"></label>

            <label for="slide-2-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img03.jpg"></label>

            <label for="slide-3-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img04.jpg"></label>  

         <div class="wrapper">
            <div id="carousel">

                <input id="slide-1-trigger" type="radio" value="slider1" name="sliders" checked>
                <div class="slide1 slider">
                        <a href="#">robert adams</a>
                        <p><q>Pellentesque sagittis, ipsum a tempor venenatis, ante justo molestie massa, quis aliquam est leo at lacus. Donec vel lacus egestas est rutrum vehicula eu eu lorem. Duis in faucibus ipsum, et fermentum neque. Curabitur egestas ipsum vitae erat tempus posuere. Donec elit nulla, varius sed vehicula et, ultrices id turpis. Aenean quis urna posuere, feugiat ex ut, congue mauris. Maecenas dapibus est at tellus malesuada congue vitae ac diam.</q></p>
                </div>

                <input id="slide-2-trigger" type="radio" value="slider2" name="sliders">
                <div class="slide2 slider">
                        <a href="#">monica perry</a>
                        <p><q>Nullam eu viverra ex. Aenean non lectus sit amet urna ultricies interdum at vehicula sem. Ut ac erat ante. Pellentesque tincidunt, dolor id ornare vestibulum, dolor diam consequat sapien, id pulvinar velit ex aliquet lectus. Cras elementum velit eget urna commodo ultrices. Sed sit amet quam molestie, lobortis justo in, efficitur diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar pharetra</q></p>
                </div>

                <input id="slide-3-trigger" type="radio" value="slider3" name="sliders">
                <div class="slide3 slider">
                        <a href="#">john smith</a>
                        <p><q>Donec venenatis sagittis cursus. Vivamus non justo nec nunc lacinia laoreet. Vestibulum feugiat gravida dapibus. In maximus porta pretium. Aliquam vitae ornare dolor. Fusce sit amet nunc ac massa sagittis interdum ut a nisl. Nulla at lacus eu justo mattis pretium a ut tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</q></p>
                </div>

            </div>
        </div>     
    </div>

Answer 1

css-selectors您的问题无法解决，您必须使用JavaScript。

在下面的小提琴中，我使用class checked-label来表示选中了label radio按钮。更改radio按钮后，系统会选中label按钮的radio，并添加课程checked-label，checked-label将从其他任何label中删除1}}有class。

（我使用jQuery，如果你想使用我提供的代码，一定要包括它）

工作小提琴是here，有评论！

Answer 2

label必须是input之后的兄弟姐妹或跟随input的兄弟姐妹的孩子。然后，您可以在规则中使用~（一般兄弟）组合子来定位它们。

＆＃13;

label {
  display: inline-block;
}

#slide-1-trigger:checked ~ label[for="slide-1-trigger"],
#slide-2-trigger:checked ~ label[for="slide-2-trigger"],
#slide-3-trigger:checked ~ label[for="slide-3-trigger"]{
  border: solid 2px green;
}

＆＃13;

<div class="clients">
         <div class="wrapper">
            <div id="carousel">

                <input id="slide-1-trigger" type="radio" value="slider1" name="sliders" checked>
                <div class="slide1 slider">
                        <a href="#">robert adams</a>
                        <p><q>Pellentesque sagittis, ipsum a tempor venenatis, ante justo molestie massa, quis aliquam est leo at lacus. Donec vel lacus egestas est rutrum vehicula eu eu lorem. Duis in faucibus ipsum, et fermentum neque. Curabitur egestas ipsum vitae erat tempus posuere. Donec elit nulla, varius sed vehicula et, ultrices id turpis. Aenean quis urna posuere, feugiat ex ut, congue mauris. Maecenas dapibus est at tellus malesuada congue vitae ac diam.</q></p>
                </div>

                <input id="slide-2-trigger" type="radio" value="slider2" name="sliders">
                <div class="slide2 slider">
                        <a href="#">monica perry</a>
                        <p><q>Nullam eu viverra ex. Aenean non lectus sit amet urna ultricies interdum at vehicula sem. Ut ac erat ante. Pellentesque tincidunt, dolor id ornare vestibulum, dolor diam consequat sapien, id pulvinar velit ex aliquet lectus. Cras elementum velit eget urna commodo ultrices. Sed sit amet quam molestie, lobortis justo in, efficitur diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar pharetra</q></p>
                </div>

                <input id="slide-3-trigger" type="radio" value="slider3" name="sliders">
                <div class="slide3 slider">
                        <a href="#">john smith</a>
                        <p><q>Donec venenatis sagittis cursus. Vivamus non justo nec nunc lacinia laoreet. Vestibulum feugiat gravida dapibus. In maximus porta pretium. Aliquam vitae ornare dolor. Fusce sit amet nunc ac massa sagittis interdum ut a nisl. Nulla at lacus eu justo mattis pretium a ut tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</q></p>
                </div>
                <!--labels i wanna style-->
                <label for="slide-1-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img02.jpg"></label>

                <label for="slide-2-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img03.jpg"></label>

                <label for="slide-3-trigger"><img src="http://livedemo00.template-help.com/wt_52537/images/index_img04.jpg"></label>
            </div>
        </div>     
    </div>

＆＃13;

如何在输入元素之前选择标签？

2 个答案: