样式中同级元素同时hover

<div class="subnav">
                <ul>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                    <li><a href="#">前端开发</a><span>&gt</span></li>
                </ul>
            </div>

每个li标签内都嵌套了a标签和span标签，如果想实现a标签hover样式同时span也改变，除了在a标签内嵌套span标签的方案外。还有下面这种书写方式。

.subnav ul li a:hover,
        .subnav ul li a:hover~span{
            color:#00a4ff;
        }