CSS关系选择器-526互联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       ol li{
            color: green;
        }
    </style>            <!--所有子类元素生效 不包括自己-->
</head>
<body>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        5
    </ol>
</body>
</html>

后代选择器：E F{}所有子类元素样式会发生改变，不管其路径隐藏多深

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>p{
            color: yellowgreen;
        }
    </style>                <!--直接子类元素生效 不包括自己-->
</head>
<body>
    <div>
        <p>你好哈哈哈</p>
        <ul>
            <li>
                <p>我好吗？！！！</p>
                2
            </li>
        </ul>
        
    </div>
</body>
</html>

子代选择器：E>F{}直接子元素生效，即你好哈哈哈生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1+p{
            color: aqua;
        }
    </style>            <!--相邻兄弟元素生效 不包括自己-->
</head>
<body>
    <h1>你现在好吗</h1>
    <p>现在感觉良好？！！！</p>
    <p>那就好？？？？</p>
</body>
</html>

相邻兄弟选择器：E+F{}，紧跟选择相邻的第一个兄弟元素，即第一个p标签样式改变、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3~p{
            color: blueviolet;
        }
    </style>            <!--h3 （ 不算数量 ）之后的所有兄弟元素生效-->
</head>
<body>
    <h3>明天你好吗</h3>
    <p>明天应该好？？？</p>
    <p>oK 我现在又不好了</p>
    <p>啊啊啊啊啊发癫了要</p>
    <h2>111</h2>
    <p>777</p>
</body>
</html>

通用兄弟选择器：E~F{}选择紧跟之后的所有兄弟元素，即“777”样式会随之改变