4-12 通用兄弟选择器

作者: 一Left一 | 来源:发表于2017-12-07 15:30 被阅读14次

    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 通用兄弟选择器

      本文链接:https://www.haomeiwen.com/subject/hdflixtx.html