CSS3关于:hover 在前和在后的比较

hover是一个伪类选择器，最近发现一个问题，就是关于.con:hover li 和.con li:hover的比较，先来描述一下这两个的意思：
.con:hover li 表示的是当鼠标移动到.con中时的li样式变化
.con li:hover 表示的是当鼠标移动到.con中的li上面的时候li的样式变化

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .con{
            border:2px solid red;
        }
        ul{
            list-style:none;
        }
        li{

            width:50px;
            height:50px;
            margin:10px 0;
            line-height:50px;
            text-align:center;
            background-color:gold;
            transition:all 2s ease;

        }

        
         /*关于hover在前或者在后的比较*/
        /*.box .front:hover表示的是当鼠标移动到box中的front上时的front样式变化。
         .box:hover .front 表示的是当鼠标移动到box上面的时候front的样式变化*/
 
        /*鼠标停留在红色框内任何区域都hover，1-5全部同时hover*/
        .con:hover li{
            background-color:red;
            width:500px;

        }



         /*鼠标只有停留在黄色区域在进行hover，而且鼠标移动到哪个哪个进行hover*/
        .con li:hover{
          /*  background-color:red;
            width:500px;
        }*/
    </style>
</head>
<body>
    <ul class="con">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>