结构选择器

1.选择第一个

1.1 父元素>子元素1:first-child {}

选择父元素中第一个子元素，并且与子元素1是相同的

例：

.first>li:first-child>a {
           text-decoration: none;
      }  
       
       
<ul class="first">
        <h2>ul的第一个元素</h2>
       <li><a href="#">lorem1</a></li>
       <li><a href="#">lorem2</a></li>
       <li><a href="#">lorem3</a></li>
       <li><a href="#">lorem4</a></li>
   </ul>

   first-child:选中的是父元素中第一个子元素
  但这里第一个子元素是<h2>
  所以这里.first>li:first-child>a不起效果

1.2 父元素>子元素1:first-of-type {}

先将父元素中的子元素按照标签名进行分类，然后在对应类别中选择第一个子元素1

例：

.first>li:first-of-type>a {
           text-decoration: none;
      } 
​
​
<ul class="first">
       <h2>ul的第一个元素</h2>
       <li><a href="#">lorem1</a></li>
       <li><a href="#">lorem2</a></li>
       <li><a href="#">lorem3</a></li>
       <li><a href="#">lorem4</a></li>
       <!-- <a href="#">ul中最后的元素</a> -->
   </ul>

  这里选中<li>里的第一个<li>:
   <li><a href="#">lorem1</a></li>

2.选择最后一个

2.1 父元素>子元素1:last-child {}

选择父元素中最后一个子元素，并且与子元素1是相同的

例：

.first>li:last-child {
           background-color: pink;
      } 
       
       
<ul class="first">
       <h2>ul的第一个元素</h2>
       <li><a href="#">lorem1</a></li>
       <li><a href="#">lorem2</a></li>
       <li><a href="#">lorem3</a></li>
       <li><a href="#">lorem4</a></li>
   </ul>

这里选中的是<li><a href="#">lorem4</a></li>

2.2 父元素>子元素1:last-of-type {}

先将父元素中的子元素按照标签名进行分类，然后在对应类别中选择最后一个子元素1

例：

.first>li:last-of-type {
background-color: pink;
} 
​
​
<ul class="first">
       <h2>ul的第一个元素</h2>
       <li><a href="#">lorem1</a></li>
       <li><a href="#">lorem2</a></li>
       <li><a href="#">lorem3</a></li>
       <li><a href="#">lorem4</a></li>
</ul>
这里选中的是<li><a href="#">lorem4</a></li>

3.选择第几个

3.1 父元素>子元素1:nth-child(num) {}

选择父元素中第num个子元素，并且与子元素1是相同的

例：

.first>li:nth-child(2) {
           list-style: none;} 
           
           
           
<ul class="first">
        <h2>ul的第一个元素</h2>
       <li><a href="#">lorem1</a></li>
       <li><a href="#">lorem2</a></li>
       <li><a href="#">lorem3</a></li>
       <li><a href="#">lorem4</a></li>
       <!-- <a href="#">ul中最后的元素</a> -->
   </ul>

这里选中的是<li><a href="#">lorem1</a></li>

3.2 父元素>子元素1:nth-of-type(num) {}

先将父元素中的子元素按照标签名进行分类，然后在对应类别中选择第num个子元素1

例：

.first>li:nth-of-type(2) {
           list-style: none;
      } 
​
​
​
<ul class="first">
        <h2>ul的第一个元素</h2>
       <li><a href="#">lorem1</a></li>
       <li><a href="#">lorem2</a></li>
       <li><a href="#">lorem3</a></li>
       <li><a href="#">lorem4</a></li>
       <!-- <a href="#">ul中最后的元素</a> -->
   </ul>

这里选中<li><a href="#">lorem2</a></li>

注释：num的选值

odd/2n+1 奇数

even/2n 偶数

num1*n+num2 =>从num2开始，以num1为一个循环

例：

 .second>li:nth-child(odd) {
           background-color: pink;
       }
​
       .second>li:nth-child(even) {
           background-color: gold;
       } 
        .second>li:nth-child(3n+1) {
           background-color: pink;
       }
       .second>li:nth-child(3n+4) {
           background-color: gold;
       }

4.除了满足条件的之外的元素

元素:not(条件) 条件：选择器

例：

.second>li:not(:nth-child(even)) {
           color: red;
      }