css3伪类选择器 nth-child

选中第一个元素：

.container > div:first-child {
    background: #abcdff;
}

选中最后一个可以使用last-child

.container > div:last-child{
    background: #abcdff;
}

可以通过传递具体的数字选中具体的子元素：

.container > div:nth-child(1) {
    background: #abcdff;
}

.container > div:nth-child(2) {
    background: #ffabcd;
}

.container > div:nth-child(3) {
    background: #aacc66;
}

.container > div:nth-child(4) {
    background: #EDC951;
}

可以通过n表示变量，例如实现基偶选择：

.container > div:nth-child(2n+1) {
    background: #abcdff;
}

.container > div:nth-child(2n) {
    background: #ffabcd;
}

可以实现周期颜色轮换，例如4个颜色一个周期：

.container > div:nth-child(4n-1) {
    background: #abcdff;
}

.container > div:nth-child(4n-2) {
    background: #ffabcd;
}

.container > div:nth-child(4n-3) {
    background: #aacc66;
}

.container > div:nth-child(4n) {
    background: #EDC951;
}