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 阅读 8 次 更新于 2025-07-19 09:19:30 我来答关注问题0
  •  翡希信息咨询 CSS3——:nth-child选择器基本用法简述

    CSS3 的 :nthchild 选择器基本用法如下:基本选择:p:nthchild:选择父元素中第 n 个子元素,且该子元素为 p 元素。n 是从 1 开始的。例如,p:nthchild 表示选择父元素中的第二个 p 元素。倍数选择:p:nthchild:选择父元素中所有符合 an规则的 p 元素。例如,p:nthchild 表示选择父元素中...

  •  阿暄生活 CSS3 :nth-child() 选择器(实用)

    CSS3的:nthchild选择器是一个强大的工具,用于为循环列表中的元素提供特殊样式设置。以下是关于:nthchild选择器的一些实用信息和用法:选择指定位置的元素:可以直接指定元素的序号来选择,例如:nthchild会选择父元素中的第三个子元素。选择奇数和偶数元素::nthchild用于选择所有偶数位置的元素。:nthchild用...

  •  翡希信息咨询 css3中nth-child属性作用及用法剖析

    CSS3中的nthchild属性用于根据元素在同级元素中的位置进行精确选择,并为这些元素设置特定的样式。以下是关于nthchild属性的作用和用法的详细剖析:1. nthchild属性的作用: 精确定位元素:根据元素在元素集合中的位置,为这些元素设置特定的样式。 提升布局和设计灵活性:有助于创建动态布局和实现复杂样式控...

  • :nth-child 是 CSS3 提供的一个实用的选择器,它常用于项目中,以下是对其常用方法的简要介绍。示例代码中使用的例子相同,p 元素的父元素都是 body p:nth-child(2)这个选择器表示为第2个 p 元素添加背景色,p:nth-child(3)则指第3个 p 元素,以此类推 以上述示例为承接,如果这里的 p 元素...

  •  文暄生活科普 CSS3 :nth-child() 选择器(实用)

    CSS3的:nth-child()选择器是为循环列表中的元素提供特殊样式设置的强大工具。这个选择器根据元素在父元素中的位置,可以实现多种灵活的应用,如指定第几个元素、奇数和偶数、特定倍数、公式选择等。例如,你可以用:nth-child(2n+1)来选择所有奇数位置的元素,或者:nth-child(-n+9)选取从第一个到第...

檬味博客在线解答立即免费咨询

CSS相关话题

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