CSS中:nth-child的用法

html-css010

CSS中:nth-child的用法,第1张

做前端一定要记住:nth-child(2)这个选择器,它可以帮你轻松选择你想要的标签并给与修改添加样式

下面通过几个例子说明,相信你一看就明白

:nth-child(2)表示选取第几个标签,”2可以是你想要的数字”

:nth-child(n+4)选取大于等于4标签,”n”表示从整数

:nth-child(-n+4)选取小于等于4标签

:nth-child(2n)选取偶数标签,2n也可以是even

:nth-child(2n-1)选取奇数标签,2n-1可以是odd

:nth-child(3n+1)自定义选取标签,3n+1表示”隔二取一”

:last-child选取最后一个标签

:nth-last-child(3)选取倒数第几个标签,3表示选取第3个

:first-child选择某个元素的第一个子元素;

:last-child选择某个元素的最后一个子元素;

:nth-child()选择某个元素的一个或多个特定的子元素;

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

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

:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;

:first-of-type选择一个上级元素下的第一个同类子元素;

:last-of-type选择一个上级元素的最后一个同类子元素;

:only-child选择的元素是它的父元素的唯一一个了元素;

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;

:empty选择的元素里面没有任何内容。

nth-child可以选择单个元素,也可以实现一个范围,如:

123456上面是一个列表1.选择单个标签元素(指定序列的单个元素).li:nth-child(1){

color:

red}执行上面的CSS,1在界面上面表现为红色2.选择一个范围的标签元素(偶数序列的元素)