Heim > Web-Frontend > CSS-Tutorial > Hauptteil

first-child的作用是什么

青灯夜游
Freigeben: 2022-12-30 11:11:41
Original
12002 人浏览过

“:first-child”是css中的一个选择器,其作用是用于匹配其父元素中的第一个子元素;其语法格式是“指定子元素:first-child{css代码样式}”。

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

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

:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。——w3school

嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解:

  • 误解一:认为E:first-child选中E元素的第一个子元素。

  • 误解二:认为E:first-child选中E元素的父元素的第一个E元素。

你是不是也曾这样理解这个选择器或者现在仍然这样理解?以上两种理解都是错误的,为了证明上面两种理解是错的,看看下面的实例:




Nach dem Login kopieren

效果是这样的:

1.png

很明显,照第一种理解,应该只有第一个a元素字体颜色变红,然而事实上全部变红了。




Nach dem Login kopieren

效果是这样的:

2.png

照第二种理解,div里的第一个a元素字体应该是红色的,事实证明这种理解也是错的。

OK,正确的理解应该是:只要E元素是它的父级的第一个子元素,就选中。它需要同时满足两个条件,一个是“第一个子元素”,另一个是“这个子元素刚好是E”。




	
		
		
	
.demo的第一个子元素是div

第一个span第一个段落P第二个span

一个链接第一个i元素

一个链接第二个i元素

一个链接

Nach dem Login kopieren

效果:

1.png

更多编程相关知识,请访问:编程学习!!

以上是first-child的作用是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!