快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

css中:nth-child(n)有什么作用

这篇文章给大家分享的是有关css中:nth-child(n)有什么作用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联公司是少有的成都网站建设、成都做网站、营销型企业网站、成都微信小程序、手机APP,开发、制作、设计、外链、推广优化一站式服务网络公司,于2013年成立,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评

“:nth-child(n)”是css中的一个选择器,作用是:匹配属于其父元素的第N个子元素,不论元素的类型;其中,参数“n”可以是数字、关键词或公式,例“:nth-child(3)”、“:nth-child(even)”。

本文操作环境:宏基S40-51、CSS3&&HTML5&&HBuilderX.3.0.5版、Windows10 家庭中文版

(学习视频分享:css视频教程)

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。nth-child(n)是css3中的一种选择器。

:nth-child(n)选择器用于匹配父元素索引为n的子元素,即选取属于其父元素的第N个子元素,不论元素的类型。

说明:n可以是数字、关键词(Odd 和 even)或公式。

示例1:当n为数字



	
		
		:nth-child(n)选择器
		
	
	
		

第一个段落。

第二个段落。

第三个段落。

第四个段落。

效果图:

css中:nth-child(n)有什么作用

示例2:当n为关键词(Odd 和 even)



	
		
		:nth-child(n)选择器
		
	
	
		

第一个段落。

第二个段落。

第三个段落。

第四个段落。

第五个段落。

第六个段落。

第七个段落。

第八个段落。

第九个段落。

第十个段落。

效果图:

css中:nth-child(n)有什么作用

示例3:当n为公式



	
		
		:nth-child(n)选择器
		
	
	
		

第一个段落。

第二个段落。

第三个段落。

第四个段落。

第五个段落。

第六个段落。

第七个段落。

第八个段落。

第九个段落。

第十个段落。

效果图:

css中:nth-child(n)有什么作用

使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:

感谢各位的阅读!关于“css中:nth-child(n)有什么作用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前名称:css中:nth-child(n)有什么作用
新闻来源:http://6mz.cn/article/pogisd.html

其他资讯