css3新增选择符 |css3弹性布局跨列

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