CSS hover使用技巧

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #wyzx{
                width: 400px;height: 400px;background-color: #000000;
            }
            .wyzx2{
                width: 150px;height: 150px;background-color: #ff0000;
            }
            /* .wyzx2:hover{
                width: 300px;height: 300px;background-color: #00ff00;
            } */
            /* #wyzx:hover .wyzx2{
                width: 300px;height: 300px;background-color: #00ff00;
            } */
            /* #wyzx:hover .wyzx2 p{
                color: #0000ff;font-size: 30px;
            } */
            /* .wyzx3:hover{
                color: #ffffff;
            } */
            /* .wyzx3:hover+p{
                color: #ffffff;
            } */
            .wyzx3:hover~p{
                color: #ffffff;
            }
        </style>
    </head>
    <body>
        <!-- 
        元素在hover状态时：
            1.可以设置自己或后代元素的属性。
            2.可以设置自己之后兄弟元素的属性。
         -->
        <!-- div#wyzx -->
        <div id="wyzx">
            <div class="wyzx2">
                <p>我要自学</p>
                <p class="wyzx3">我要自学</p>
                <p>我要自学</p>
                <p>我要自学</p>
            </div>
        </div>
    </body>
</html>