html - Css sibling (~) 选择器不适用于选中的属性

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 在 #slide1 之后搜索 #broadControl 标签元素，它不能在它之前搜索。

fiddle 示例:
http://jsfiddle.net/9vxYJ/

您会在那个 fiddle 中看到我将您的 #broadcast 部分移到了 broadcast controls 之后。

另一个问题是 ~ 是一个兄弟选择器，这意味着它只能找到同一级别的元素。但是你可以解决这个问题，因为 #broadcast 与 #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;}