li:nth-child(5) { ... } 如果选择第一个元素的话你可以使用:first-child或者用上面的方法。 除了前五个全部选择 li:nth-child(n+6) { ... } 只选择前5个 li:nth-child(-n+5) { ... } 从第一个开始,每隔4个选择一个 li:nth-child(4n-7) { /* or 4n+1 */ ... } 选择奇数或者偶数...
前端实际应用中更容易用到的CSS3选择器是:first-child和:last-child,它们的作用分别是选取第一个和最末一个子元素。而实际上它们还有一个功能上更强大的兄弟选择器,:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n可以是数字、关键词或公式。除了 IE8 及更早的版本,所有主流浏览器...
E:first-child:匹配元素类型为E且是父元素的第一个子元素 E:last-child:匹配元素类型为E且是父元素的最后一个子元素 除了上面根据序号来定位相关元素的样式,还可以使用first-child和last-child来进行定位。 E > F E元素下面第一层子集 E ~ F E元素后面的兄弟元素 E + F...
除了使用数字n来指定位置,我们还可以使用诸如even(偶数)和odd(奇数)来选择更多的元素。例如,以下代码选择所有偶数行并应用样式: tr:nth-child(even) { /* 样式代码 */ } first-child选择器 first-child选择器可以用来选择父元素的第一个子元素并应用样式。例如,在一个无序列表中,我们想要为第一个列表项添加特...
如果相对li进行操作 id号为item下的li的第三个元素变红 1 #item li:nth-child(3) 想对除了第一个后的元素设置效果的话/ a:nth-child(n+2){n必须在前面,不能写成2+n。原理:假如有3各元素,给后两个设置效果 开始n=0时候为2 n=1时候为3 n=2时候为4,这个时候没有4,所以也不生效。border-left:1px...
除了基本语法外,nth-child(n)还支持一些高级用法。例如,我们可以使用:nth-child(3n+1)来选择每隔3个子元素中的第1个子元素。这对于创建网格布局非常有用。 此外,在SCSS中还有一些其他与nth-child(n)相关的函数和混合宏可供使用。例如,nth-last-child(n)函数用于选择父元素倒数第n个子元素;first-child伪类用于...
这将使列表中的第二个列表项文本颜色变为红色。 使用关键词 除了数字,还可以使用一些关键词,如odd和even: tr:nthchild(odd) { backgroundcolor: #f2f2f2; } td:nthchild(even) { fontweight: bold; } 上述代码将给奇数行表格添加灰色背景,并将偶数列的单元格文字加粗。
E:first-child:匹配元素类型为E且是父元素的第一个子元素 E:last-child:匹配元素类型为E且是父元素的最后一个子元素 除了上面根据序号来定位相关元素的样式,还可以使用first-child和last-child来进行定位。 E > F E元素下面第一层子集 E ~ F E元素后面的兄弟元素 ...
1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child(even)、nth-last-child(3)(倒数第三个) 注意点: 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 1、先找到该伪类调用者(元素)的父类 ...
实例规定属于其父元素的第二个子元素的每个 p 的背景色:p:nth-child(2){background:#ff0000;}浏览器支持所有主流浏览器均支持 :nth-child() 选择器,除了 IE8 及更早的版本。定义和用法:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,... 选择器 背景色 其他 转载 mb5ff2f2ed7d163 2015...