CSS3属性(3):nth-child()属性

在进行选择时,我们会经常用到nth-child()属性,使用此属性,可以实现对一个或者多个的选择。


		
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

css:

li:nth-child(4){
				color: crimson;
			}

结果:

CSS3属性(3):nth-child()属性_第1张图片


当css为:

li:nth-child(2n+1){
				color: crimson;
			}
实现对奇数颜色的改变:

CSS3属性(3):nth-child()属性_第2张图片

当css为:

li:nth-child(3n+1),li:nth-child(3n+2){
				color: crimson;
			}

取并集,颜色改变的数字为:

CSS3属性(3):nth-child()属性_第3张图片

当css为:

li:not(:nth-child(n+5)){
				color: crimson;
			}
结果为:

CSS3属性(3):nth-child()属性_第4张图片

当css为:

li:nth-child(2n+1):nth-child(3n+1){
				color: crimson;
			}
结果为去交集

CSS3属性(3):nth-child()属性_第5张图片


你可能感兴趣的:(Web前端)