在操作td的时候,为什么nth-child()和nth-of-type()效果一样

在操作td的时候,为什么nth-child()和nth-of-type()效果一样

按理说nth-child的父元素这回是tr,应该像对h1操纵first-child和first-of-type一样,如果body下面第一个是h1,则都有效。如果不是,则后者有效。可是td上面是tr啊,怎么会都可以?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕美 2019-11-14 19:22:41

同学,你好。

1、:nth-child:选择某个元素的一个或多个特定的子元素,视频例子中是td:nth-child(2)为指父元素下第2个元素且这个元素为td,若不是,则选择失败。

2、nth-of-type(N):选择器匹配同类型中的第n个同级兄弟元素。td:nth-of-type(3)是指父元素下第3个td元素

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			td:nth-child(2) {
				background-color: red;
			}
			
			td:nth-of-type(3) {
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<table border="1" width="500px">
			<tr>
				<td>1</td>
				<th>1</th>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
	</body>

</html>

效果图:

http://img1.sycdn.imooc.com//climg/5dcd38c40957d18405440136.jpg

如果我的回答解决了您的疑惑,请采纳!祝学习愉快~~~~

  • 提问者 Mymusic #1
    第一行第二列td打错了。。
    2019-11-15 09:19:46
  • 好帮手乔木 回复 提问者 Mymusic #2
    同学你好:同学要细心哟,学习愉快^_^。加油!
    2019-11-15 10:22:17
  • 提问者 Mymusic 回复 好帮手乔木 #3
    那不是我回答的,我在问,你们回复弄错了,我晕
    2019-11-15 17:29:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.从网页搭建入门Python Web
  • 参与学习           人
  • 提交作业       218    份
  • 解答问题       3562    个

本阶段带你用Python开发一个网站,学习主流框架Django+Flask是Python Web开发的第一步,在基础知识上实现积分商城的项目开发,体验真实的项目开发流程,提高解决编程问题和效率的能力。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师