4-12 通用兄弟选择器

1、作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
2、连接符：~
3、格式：

选择器1~选择器2{
    属性:值;
}

4、注意点:
通用兄弟选择器必须用~连接
通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .choose~li{
           color: red;
       }
        ul~p{
            color: red;
        }
    </style>
</head>
<body>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
    <li class="choose">我是一个li</li>
    <li>我是一个li 变成红色 </li>
    <li>我是一个li</li>
    <li>我是一个li</li>
    <li>我是一个li</li>
    <li>我是一个li</li>
</ul>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h1>我是一个标题</h1>
<p>我是一个段落</p>
<h1>我是一个标题</h1>
<p>我是一个段落</p>
<p>我是一个段落</p>
<h1>我是一个标题</h1>
<p>我是一个段落</p>
<h1>我是一个标题</h1>
</body>

图片.png

4-12 通用兄弟选择器

推荐阅读更多精彩内容