2021/9/10

层次选择器

<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>


</ul>

1. 后代选择器

   在某个元素的后面：祖爷爷 爷爷 爸爸 你

   /*    后代选择器*/
       body p{
           background-color: darkcyan;
       }
   

   在body后面的所有p颜色都会变

2. 子选择器

   /*子选择器*/
       body>p{
           background-color: bisque;
       }
   

   只有body直接管辖的p才会变

3. 相邻兄弟选择器

   同辈（对下）

   /*   相邻 兄弟选择器  只有一个（向下选择）*/
       .active+p{
           background-color: brown;
       }
   

   只针对该p下面的p起作用

4. 通用选择器

   /*通用选择器 当前选中p的下面所有p*/
   .active~p{
       background-color: aquamarine;
   }
   

   对该p下面所有的p起作用

结构伪类选择器

伪类：

1. ul的第一个子元素

/* */
/*    ul li:first-child{*/
/*      background-color: aquamarine;*/
/*    }*/

/* ul的最后一个子元素*/
/*ul li:last-child{*/
/*  background-color: bisque;*/

3. 根据顺序进行选择

/选中p1：要先定位到父元素，选中该父级当前第一个元素/（可以选择2，3…）
/* 选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
若定位到父级的第一个元素不是p类型则不会生效

/*p:nth-child(1){*/
/*  background-color: #f9d7fa;*/
/*}*/

4. 根据类型进行选择

选中父元素第一个类型为p的 (可以选择2，3…)（按类型）

p:nth-of-type(1){
  background-color: brown;
}