鼠标移入li后无法达到想要的效果

问题遇到的现象和发生背景 :无法选中li元素下的全部元素，达不到鼠标移入li后实现a i span的状态改变的效果

<ul class="shop"> 
                <li><a href="javascirpt:;">
                        <i class="fa fa-shopping-cart">i>
                        购物车
                        <span class="shopping-num">(0)span>
                    a>
                li>   
ul>

    .shop:hover a{
        color: #FF6900;
        background-color: #ffffff;
    }

我试过了，你的代码挺好的啊