CSS关系选择性-526互联

选择性的选择器有后代选择器、子代选择器、相邻选择器和通用兄弟选择器

1.后代选择器

<!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{}，E为父类，F为子类，子类所有元素生效

2.子代选择器

<!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{}其直接子元素生效，即第一个p标签样式改变

3.相邻兄弟选择器

<!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{},F样式发生改变，E与F必须为相邻标签，中间不能空格其他标签

4.通用兄弟选择器

<!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{}，选择之后所有的兄弟元素，即之后的所有p标签样式改变

//兄弟即指同级标签