情景1:

`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        body{
            margin: 0;
            padding: 0;
        }
        .container .ul li{
            width: 100px;
            height: 20px;
            background: #f00;
            margin-bottom: 10px;
            list-style: none;
        }
        .container{
            border: 1px solid #000;
        }
        .container:hover ul.ul>li:nth-child(2){
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>`

分析:當hover的元素和需要改變樣式的元素是父子關係的時候,可以這麼寫(.container:hover ul.ul>li:nth-child(2))直接在hover後面加上空格,加上需要改變你的元素

情景2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        body{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px;
            height: 100px;
            background: #6c0;
        }
        .container .ul li{
            width: 100px;
            height: 20px;
            background: #f00;
            margin-bottom: 10px;
            list-style: none;
        }
        .container{
            border: 1px solid #000;
        }
        .container:hover ul.ul>li:nth-child(2){
            background: #000;
        }
        .contianer:hover div.wrap{
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="wrap"></div>
</body>
</html>

分析:此時是hover container容器,改變wrap框的背景顏色,但發現container和wrap不是父子關係而是兄弟關係,這時候這樣寫(.contianer:hover div.wrap{background: #000;})不起效果。應該的寫法是(.container:hover +.wrap{background:#f00;})

這裡寫圖片描述