13.3 伪类选择器

• 选择第一个p标签

 p:nth-child(1) {
            color: red;
        }

  n: 1,2,3,4,5,.......

•   选择偶数对应标签 

 p:nth-child(2n) {
            color: blue;
        }

• 选择奇数对应标签

 p:nth-child(2n-1) {
            color: yellowgreen;
            font-weight: bold;
        }

 

  <p>一段文本1</p>
    <p>一段文本2</p>
    <p>一段文本3</p>
    <p>一段文本4</p>
    <p>一段文本5</p>
    <p>一段文本6</p>
    <p>一段文本7</p>
    <p>一段文本8</p>

• 选择ul标签下的第一个li子元素

  ul li:first-child {
            color: red;
        }

•  选择ul标签下的最后一个li子元素

   ul li:last-child {
            color: red;
        }

•  选择ul标签下的第一个div类型的子元素

  ul div:nth-of-type(1) {
            font-size: 40px;
        }

• 选择ul下的偶数系列的li标签

  ul li:nth-of-type(2n) {
            color: yellowgreen;
        }

 

  <ul>
         <div>块标签1</div>
         <li>无序列表标签</li>
         <li>无序列表标签</li>
         <li>无序列表标签</li>
         <li>无序列表标签</li>
         <li>无序列表标签</li> -->

不借助工具自己思考一下：

       问：nth-child和nth-of-type有什么区别 ？                   不要往下滑哟~

 

答：

• nth-child 是从父元素的所有子元素中进行顺序计算，不考虑子元素的标签
• nth-of-type 只从父元素的同类型子元素中进行顺序计算，需要相同的标签