Question

仅当li.one li.two使用CSS时，如何才能到达.active？

<ul>
    <li class="one"></li>
    <li class="two active"></li>
    <li class="three"></li>
</ul>

我试试这个，但它不起作用。

<style type="text/css">
    li.one ~ li.two.active{
        /* to do something */
    }
</style>

Answer 1

将所有li设置为给定颜色，将li.active及其相邻的兄弟姐妹设置为另一种颜色。意味着第一个li与其他li不同。因此，你有效地取消了活跃课程之后的所有其他课程。

你可以操纵顺序和li + li样式，以便在活动类之前和之后允许不同数量的lis - 我也做了一个版本，我在li3上有活动类，并且能够让li2成为不同的颜色

＆＃13;

#list1 li{color:red}
#list1 li.active, #list1 li.active + li, #list1 li+li{color:green}

#list2 li{color:green}
#list2 li + li {color:red}
#list2 li.active, #list2 li.active+li{color:green}

＆＃13;

<ul id="list1">
    <li class="one">one </li>
    <li class="two active">two</li>
    <li class="three">three</li>
    <li class="four">four</li>
</ul>

<ul id="list2">
    <li class="one">one </li>
    <li class="two ">two</li>
    <li class="three active">three</li>
    <li class="four">four</li>
</ul>

＆＃13;

如何使用CSS到达相邻元素？

1 个答案: