层次选择器

1，后代选择器：在某个元素后面的所有该标签

2,子选择器：某元素后面的下一代标签

    <style>
<!-- 后代选择器：body后面的所有p标签-->
       body p{

       }
   </style>

   <style>

   /*子选择器  body后面的第一代p*/
        body>p{
            
        }
   </style>

3，相邻兄弟选择器：只有一个 同辈且向下的一个标签

 /*相邻兄弟选择器，同辈，且是向下的一个标签*/
    .brother+p{		/*s所有*/
        background: #a957f5;
    }


<p>p1</p>
<p class="brother">p2</p>  /*只有下面的p3会变色*/
<p>p3</p>

4,通用选择器:同辈且向下的所有该标签

    .brother~p{
        background: #a957f5;
    }
   </style>
</head>
<body>
<p>p1</p>
<p class="brother">p2</p>
<p>p3</p>  /*同辈，改变*/
<p>p4</p>	/*同辈，改变*/
<ul>
    <li><p>p6</p></li>
    <li><p class="brother">p7</p></li>
    <li><p>p8</p></li>  /*该brother类与第一个不同辈，无法选中*/
    <li><p>p9</p></li>
</ul>
<<p>p10</p>		/*同辈，改变*/
<p>p11</p>		/*同辈，改变*/
<p>p12</p>		/*同辈，改变*/
posted @ 2021-09-22 13:41  逍遥游～  阅读(48)  评论(0)    收藏  举报