8

以下の 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 日間立ち往生しています。

なぜうまくいかないのかわかりません。

何かアイデアがあれば、私に提案してください。

前もって感謝します。

4

1 に答える 1

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

~演算子は、要素の後の要素でのみ機能します。この場合、ラベル要素 AFTER#slide1を検索しますが、それより前は検索できません。#broadControl#slide1

フィドルの例:
http://jsfiddle.net/9vxYJ/

そのフィドルで、私があなたの#broadcast部分を の後に移動したことがわかりますbroadcast controls。

もう1つの問題は~、兄弟セレクターであることです。つまり、同じレベルの要素しか見つけることができません。しかし、これを回避できます。IS は etc#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;}
于 2013-04-18T00:56:22.257 に答える