css - 选定单选后列表中的第一个元素

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;
}

问题是，（在这种情况下）不仅会显示第 3 个元素，而且还会显示第 4 个元素。所以任何想法，我如何才能在检查后立即显示该元素，而不是在此之后全部显示？

[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;
}