淘先锋技术网

首页 1 2 3 4 5 6 7

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样式更加灵活、强大。