CSS3 伪类选择器 nth-child() 的用法

CSS3 伪类选择器 nth-child() 的用法

:nth-child()选择某个元素的一个或多个特定的子元素，从这个元素的第一个子元素开始算

            .main div:nth-child(3){/*参数是整数*/
                background-color: red;/*选择main中的第三个div，将背景颜色改成红色*/
            }
            .main div:nth-child(n+6){/*参数n+x,x是整数*/
                background-color: orange;/*选择main中的>=6的div，将背景颜色改成橙色*/
            }
            .main div:nth-child(-n+2){/*参数-n+x,x是整数*/
                background-color: yellow;/*选择main中的<=2的div，将背景颜色改成黄色*/
            }
            .main div:nth-child(5n){/*参数x*n,x是整数*/
                background-color: green;/*选择main中的5的倍数的div，将背景颜色改成绿色*/
            }
            .main div:nth-child(4n+2){ /*参数x*n+y,x,y是整数*/
                background-color: blue;/*每4个选一个，选第2个，将背景颜色改成蓝色*/
            }

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算

:nth-last-child()选择器和前面的:nth-child()很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。

.main div:nth-last-child(2){/*参数是整数*/
    background-color:blue;/*选中倒数第二div，将背景颜色改成蓝色*/
}

:first-child选择某个元素的第一个子元素，:last-child选择某个元素的最后一个子元素

.main div:first-child{
    background-color: black;/*选中第一个div，将背景颜色改成黑色*/
}
.main div:last-child{
    background-color: black;/*选中最后一个div，将背景颜色改成黑色*/
}

:nth-of-type()选择指定的元素

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式。

可以将n设置为odd（奇数）或even（偶数）

.main div:nth-of-type(odd){
    background-color:blue;/*选中奇数div，将背景颜色改成蓝色*/
}
.main div:nth-of-type(even){
    background-color:red;/*选中偶数div，将背景颜色改成红色*/
}

也可以将n设置为表达式，比如，nth-of-type(3n+2)，与nth-child()相似

.main div:nth-of-type(4n+2){ /*参数x*n+y,x,y是整数*/
    background-color:red;/*每4个选一个，选第2个，将背景颜色改成红色*/
}

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算，与:nth-last-child()选择器相似