css - 单击列表中的第一项时设置列表中所有其他元素的样式

Question

我正在寻找一种 CSS 解决方案，以便在单击列表中的第一项时切换一组样式。也就是说，单击列表中的第一项时，该列表中的所有其他元素都会显示:无；但是当再次点击第一个元素时，所有这些元素都会重新出现，因为它们被赋予了 display:inline 的样式；

有没有办法在没有 javascript 的情况下对列表中的元素进行这种样式切换？

Answer 1

用 CSS？不，这不可能。但是这里用 jquery 完美地解决了你的问题，我希望这对你有所帮助:

<style>
    .first
    {
        display:inline;
    }
    .other
    {
        display:none;
    }
</style>

<div class="list first"></div>
<div class="list other"></div>
<div class="list other"></div>
<div class="list other"></div>
<div class="list other"></div>

<script>
    $(".fist").click(function(){
        $(".other").fadeToggle();
    });
</script>

也适用于

<ul><li>

和其他东西。