css3新增选择符

CSS3新增了一些选择符，可以更好的选择和控制HTML元素，这篇文章将介绍其中的一些。

/* 1. :nth-child(n)选择器 */p:nth-child(2) {
    color: red;
}

:nth-child(n)选择器可以选中父元素的第n个子元素，可以是一个具体的数字，也可以是一个公式。如上述代码会选中文档中的第二个p元素并将字体变成红色。

/* 2. :nth-last-child(n)选择器 */p:nth-last-child(2) {
    font-size: 20px;
}

:nth-last-child(n)选择器也是选中父元素的第n个子元素，但是是从后往前计数。例如，上述代码会选中文档中倒数第二个p元素并将字体大小设置为20px。

/* 3. :first-child选择器 */p:first-child {
    background-color: gray;
}

:first-child选择器就单纯的选中父元素的第一个子元素，如上述代码选中的是文档中第一个p元素，并将其背景色改变成了灰色。

/* 4. :last-child选择器 */p:last-child {
    border: 1px solid black;
}
    

:last-child选择器则是选中父元素的最后一个子元素，如上述代码选中的是文档中最后一个p元素，并给其添加了黑色的边框。

这些新增的选择器可以让我们更加方便的选择并控制HTML元素，让CSS样式更加灵活、强大。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！