只用css实现:hover更改其他元素的样式的限制

:hover更改其他元素的样式，不用js，只用css实现该效果，需要被:hover的元素和要被改变样式的元素可以用关系选择器链接上

    <div class="u-before">A</div>
    <ul>
        <li class="l1">I</li>
        <li class="l2">II</li>
        <li class="l3">III</li>
        <li class="l4">IV</li>
        <li class="l5">V</li>
    </ul>
    <div class="u-after">A</div>

被:hover的元素的子元素，后边的兄弟元素，后边有间隔的兄弟元素，兄弟元素的子元素，只要可以用关系选择器连接上的元素都可以实现该效果

        .u-before:hover~.u-after {
            color: red;
        }
        .u-before:hover+ul .l3{
            color: red;
        }
        .l1:hover+.l2 {
            color: red;
        }

相反，无法用关系选择器连接的元素就不可以用这种方法设置，需要js来实现，比如不能元素触发:hover时去修改其父元素，其前边的兄弟元素，或更远的元素的样式