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

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。

在下面的 fiddle 中，我使用了 class checked-label 来指示哪个 label 的 radio 按钮被选中。在更改 radio 按钮时，选中的 radio 按钮的 label 被选中并添加类 checked-label ，并且 checked-label 已从具有此 class 的任何其他 label 中删除。

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

工作 fiddle 是 here , 评论了!