Css兄弟(〜)选择器不适用于checked属性

Question

为什么我的css不适合我？任何人都可以告诉我.

#slide1:checked ~ #inner { margin-left: 0;}
#slide2:checked ~ #inner { margin-left: -800px;}
#slide3:checked ~ #inner { margin-left: -1600px;}

下面的CSS确实有用.我不知道从哪里开始.

#slide1:checked ~ #broadControl label:nth-child(1),
#slide2:checked ~ #broadControl label:nth-child(2),
#slide3:checked ~ #broadControl label:nth-child(3){
    background: #333;
    border-color: #333; !important;
}

HTML:

<div id="broadcast">
    <div id="overflow">
        <div id="inner">

            <article>
                <div class="info"></div>
                <div id="pic1"></div>
                <!--img src=""-->
            </article>
            <article>
                <div class="info"></div>
                <div id="pic2"></div>
                <!--img src=""-->
            </article>
            <article>
                <div class="info"></div>
                <div id="pic3"></div>
                <!--img src=""-->
            </article>

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

<!-- Broadcast controls -->
<input checked type="radio" name="slider" id="slide1">
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<div id="broadControl">
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
</div>

我正在尝试使用纯CSS进行幻灯片转换,以便在CSS中了解更多内容.

但是我已经被困在这里3天了.

我不知道为什么它不起作用.

如果您有任何想法,请向我推荐.

提前致谢.

Answer 1

#slide1:checked ~ #broadControl label:nth-child(1)

该~操作仅适用于该元素之后的元素.在这种情况下,#slide1搜索#broadControl标签元素AFTER #slide1,它不能在它之前搜索.

示例小提琴:http :
//jsfiddle.net/9vxYJ/

你会在那个小提琴中看到我把你的#broadcast部分移到了后面broadcast controls.

另一个问题是它~是兄弟选择器,这意味着它只能在同一级别找到元素.但你可以解决这个问题,因为#broadcastIS在同等级别#slide1等等,你可以埋葬#inner,如下:

#slide1:checked ~ #broadcast > #overflow > #inner { margin-left: 0;}
#slide2:checked ~ #broadcast > #overflow > #inner { margin-left: -800px;}
#slide3:checked ~ #broadcast > #overflow > #inner { margin-left: -1600px;}