CSS基础 结构伪类选择器 last-child、first-child和nth-of-type的使用方法

一.通过伪类选择器查找单个标签元素
html结构
     <div>
            <a herf='#'>导航1</a>  

            <a herf='#'>导航2</a>  

            <a herf='#'>导航3</a>  

    </div>
 /* 匹配第一个子元素，并且为a标签 */
     div a:first-child{}
 注意：如果第一个元素不是a，则匹配失败
 /* 匹配最后一个子元素，且为a标签 */
     div a:last-child{}
 /* 匹配第二个子元素，且为a标签 */
     div a:nth-child(2){}
 /* 匹配倒数第二个子元素，且为a标签 */
     div a:nth-last-child(2){}

二.通过结构伪类选择器，查找多个标签元素
   html结构

    <div>
            <a herf='#'>导航1</a>  

            <a herf='#'>导航2</a>  

            <a herf='#'>导航3</a>  

            <a herf='#'>导航4</a>  

            <a herf='#'>导航5</a>  

    </div>

   /* 匹配偶数行，并且为a标签元素;2n或者even */
    div  a:nth-child(2n){}     
   
   /* 匹配奇数行，并且为a标签元素 ;2n+1、2n-1或者是odd*/
    div  a:nth-child(2n+1){}

   /* 匹配前五行，并且为a标签元素 */ 
    div a:nth-child(-n+5){}
   
   /* 匹配从第五行到最后，并且为a标签元素 */
    div a:nth-child(n+5){}

 

三.使用中易错点总结

html结构
     <div>
            <a herf='#'>导航1</a>  

            <a herf='#'>导航2</a>  

            <a herf='#'>导航3</a>  

    </div>

     <div>
            <a herf='#'>导航1</a>  

    </div>
  /* 匹配第二个div，并且为a标签 */
 错误写法： div a:nth-child(2){}
 正确写法:  div:nth-chid(2) a{}

 

总结：
   html结构

<div>
            <a herf='#'>导航1</a>  

            <div> div内容部分 </div>

            <a herf='#'>导航3</a>  

            <a herf='#'>导航4</a>  

            <a herf='#'>导航5</a>  

    </div>

需求：我要匹配div下面的第二个a标签
     css 写法1：div a:nth-child(3){}     /*缺点是如果两个a直接有很多行内容需要数比较麻烦*/
     CSS 写法2：div a:nth-of-type(2){}   /* 可以直接匹配到第二个 a 标签 */