CSS3新增选择器（2）- 结构性伪类选择器

目录

1. first-child

2. last-child

3. nth-child(value)

 4. nth-last-child(value)

 5. only-child

 6. first-of-type

 7. last-of-type

8. nth-of-type(value)

9. nth-last-of-type(value)

10.only-of-type

11.root

12.empty

---

在这里我就用ol(有序列表)来作为一个例子！！！！！！，代码如下：

    <ol>
        <p>ppppppppppp</p>
        <li>刘</li>
        <li>赵<a href="#">1</a></li>
        <p>ppppppppppp</p>
        <li>钱<a href="#">11</a><a href="#">11</a></li>
        <li>孙</li>
        <li>李</li>
        <li>周</li>
        <li>吴</li>
        <li>郑</li>
        <li>王</li>
        <p>ppppppppppp</p>

    </ol>

1. first-child

选中父元素下第一个子元素，例如

ol li:first-child{
         font-size: 30px;
} 

选择ol下第一个且为li的标签，如果第一个子元素不是li，选中不了任何元素，效果如下

2. last-child

选中父元素中最后一个资源，例如

ol li:last-child{
    font-size: 50px;
}

选中ol中最后一个且为li的元素，如果最后一个子元素不是li，则没有选中任何元素，效果如下

3. nth-child(value)

选中元素中第几个子元素，值可以是数字也可以是even、odd、方程等，例如

ol li:nth-child(3n){
    font-size: 30px;
}

 选中ol中3的倍数并且为li的元素，如果3的倍数个元素不是li，则不会选中

 4. nth-last-child(value)

这个和nth-child(value)差不多，只不过是进行倒序选择，例如：

ol li:nth-last-child(2){
    font-size: 30px;
}

 倒序选中ol中3的倍数并且为li的元素，如果3的倍数个元素不是li，则不会选中

 

 5. only-child

选中父元素中子元素中只有唯一元素的元素，例如

ol li a:only-child{
   font-size: 30px;
   color: red;
}

选中ol中li中的唯一元素a，效果如下 ：

 6. first-of-type

选中父元素中的第一个对应子元素，例如：

ol li:first-of-type{
     font-size: 50px;
}

选中ol的第一个li，效果如下：

 7. last-of-type

选中父元素中最后一个相应元素，例如：

ol li:last-of-type{
    font-size: 30px;
}

选中ol中最后一个li元素，效果如下：

8. nth-of-type(value)

选中元素中第几个子元素，值可以是数字也可以是even、odd、方程等，例如

ol li:nth-of-type(3){
     font-size: 30px;
}

选中ol的第三个li元素，效果如下：

9. nth-last-of-type(value)

倒序选择父元素中的子元素，例如：

ol li:nth-last-of-type(2){
     font-size: 30px;
}

选中ol中倒数第二个li，效果如下：

 10.only-of-type

选中父元素中的子元素中的唯一标签

ol li a:only-of-type{
     font-size: 50px;
}

选中li中具有唯一性的a标签，效果如下：

 11.root

选择根元素进行修改，在HTML中，根元素永远都是HTM，例

:root{
     background: #ccc;
}

上面的代码会让整个页面拥有该颜色背景

12.empty

选择没有任何子元素的元素