CSS

层次选择器

1. 后代选择器：在某个元素的后面

   body p{
               background: red;
           }

    

2. 子选择器:一代

   body>p{
               background: yellow;
           }

    

3. 相邻兄弟选择器：同辈（在它下面的兄弟）

   .active + p{
              background: #a13d30;
          }

    

4. 通用选择器：选中当前元素向下的所有兄弟元素

   .active ~ p{
              background: #a13d30;
          }

   结构伪类选择器

   /*ul的第一个子元素*/
          ul li:first-child{
              background: #a13d30;
          }
   /*ul最后一个子元素*/
          ul li:last-child{
              background: #ff008a;
          }
   /*选中P1：定位父元素，选择第一个元素
          选择当前p元素的父级元素，选中父级元素的第一个
          */
           p:nth-child(1){
               background: yellow;
           }
   /*选中父元素下的p元素的第二个，类型*/
           p:nth-of-type(2){
               background: green;
           }

5.