H5/Web前端开发教程WEB前端程序开发Web前端之路

4-12 通用兄弟选择器

2017-12-07  本文已影响14人  一Left一

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
上一篇 下一篇

猜你喜欢

热点阅读