CSS3中:nth-child和:nth-of-type的区别深入理解

第3个span 第6个p 第7个p 第2个span 不知道以上代码是否能看明白, nth-of-type的时候, 只计算p的数量, 忽略span, 如果是nth-child的时候, 全部计算, 个人是这么理解的, 也不知道是否准确
CSS3中:nth-child和:nth-of-type的区别深入理解
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>1</title>
<style>
p:nth-of-type(7){color:#f00;}
p:nth-child(6){color:#933;}
</style>
</head>
<body>
<div>
<p>第1个p</p>
<p>第2个p</p>
<p>第3个p</p>
<p>第4个p</p>
<span>第1个span</span>
<p>第5个p</p>
<span>第3个span</span>
<p>第6个p</p>
<p>第7个p</p>
<span>第2个span</span>
</div>
</body>
</html>

不知道以上代码是否能看明白, nth-of-type的时候, 只计算p的数量, 忽略span, 如果是nth-child的时候, 全部计算, 个人是这么理解的, 也不知道是否准确2016-07-03
mengvlog 阅读 94 次 更新于 2025-10-30 08:36:40 我来答关注问题0
檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部