所选电台之后，列表中的第一个元素

Question

我有一个单选按钮序列，然后是其他dom元素。 现在，我想隐藏除所选单选按钮之后的元素以外的所有元素。

  <div id="gallery" data-role="image-slider">
        <input type="radio" />
        <div class="image-slider-element">
            <img src="" />
        </div>

        <input type="radio" />
        <div class="image-slider-element">
            <img src="" />
        </div>

        <input type="radio" checked="checked" />
        <div class="image-slider-element">
            <img src="" />
        </div>

        <input type="radio" />
        <div class="image-slider-element">
            <img src="" />
        </div>
    </div>

[data-role="image-slider"] > input[type="radio"] ~ .image-slider-element {
    display: none;
}

[data-role="image-slider"] > input[type="radio"]:checked ~ .image-slider-element {
    display: block;
}

[data-role="image-slider"] img {
    height: 400px;
}

问题是（在这种情况下）不仅会显示第三个元素，而且还是会显示第四个元素。 那么，有什么想法，我如何才能在选中的元素之后立即显示该元素，而不是在此之后全部显示？

[data-role="image-slider"] > input[type="radio"]:checked ~ .image-slider-element:first-child将不起作用，因为first-child仅与第一个元素相关。

Answer 1

好吧-抱歉...漫长的一天... +可以工作

[data-role="image-slider"] > input[type="radio"]:checked + .image-slider-element {
    display: block;
}