css伪类nth-child，nth-of-type的顺序是怎么计数的呢？

最新推荐文章于 2024-09-11 09:30:30 发布

haoyanyu_

最新推荐文章于 2024-09-11 09:30:30 发布

阅读量485

点赞数

分类专栏： css HTML

本文链接：https://blog.csdn.net/haoyanyu_/article/details/107721487

版权

本文介绍了CSS选择器nth-child(n)和nth-of-type(n)的工作原理，通过一个实例揭示了计数顺序并非从父元素的第一个子元素开始，而是从所有相同类型元素的序列中计数。在解析过程中，纠正了一个关于这两个伪类的常见误解，并建议开发者仔细理解这些概念以避免类似问题。

摘要由CSDN通过智能技术生成

今天遇到一个坑

项目中写css时，如果一个容器里有多个子元素，但是子元素的样式并不是完全一样的，稍微有点差异，这个时候一般通过nth-child(n)，或者nth-of-type(n)定制子元素的样式。

那么n是如何计数的呢？

在这里一直有一个误解，惭愧惭愧～～😅

如下代码

<div class="content">
  <p>水平垂直居中， justify-content, align-items</p>
  <div class="layout allcenter">
    <span>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

haoyanyu_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式

12-11

今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...

使用css伪类，实现同类型复选框计数的效果

weixin_34355881的博客

12-29

105

开始啦最近发现一个css的小技巧。在以往，当我想要获取checkbox的数据数量的时候，常规的做法是使用js遍历checkbox数组，定义变量达到统计数量的效果。现在使用css完全可以实现相同的效果，简单便捷，在不操作DOM的情况下达到目的，嘻嘻代码块这里贴出相关代码，希望能帮到大家： <html> <h...

参与评论您还未登录，请先登录后发表或查看评论

css3 :nth-child选择器

weixin_40650646的博客

08-31

552

概述： :nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...）。示例： a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，an...

小tip:CSS计数器+伪类实现数值动态计算与呈现

chelen_jak的专栏

04-24

978

转自：http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/ 一、CSS计数器为哪样？要想理解本文内容，你需要首先了解什么是CSS计数器，您可以查看前不久我写的文章“CSS计数器(序列数字字符自动递增)详解”，相当地详尽与深入。下面的动态行为全部由HT

css伪类 :nth-child

DyuanH的博客

11-03

148

标签>:nth-of-type(n) 该标签的位置属于父级的第n个儿子。:nth-child(n) 该标签的位置属于父级的第n个儿子。:first-child 该标签的位置属于父级的第1个儿子。

关系选择器，nth-child和nth-of-type

m0_53438035的博客

07-26

116

关系选择器后代选择器：E F 选择E元素的所有后代F元素子选择器：E > F 选择E元素的所有子元素F 相邻同胞选择器：E + F 选择紧接在E元素之后的第一个兄弟元素F 同胞选择器：E ~ F 选择E元素之后的所有兄弟元素F nth-child和nth-of-type 区别： nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素。（标签优先）而ele:nth-child(n)是指

详解CSS3中nth-child与nth-of-type的区别

09-24

在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...

nth-of-type 和 nth-child 解析

peade的博客

08-29

346

在开发的时候，nth-of-type和nth-child是比较常用的伪类。这两个的作用原理是这样的： nth-of-type: 序号的计算是这样的，父类下，与本元素相同的元素，都会计算进总数里。 nth-child: 序号的计算是这样的，父类下，所有的直接子元素，都会计算进总数里 html里的结构如下： <div> <h1>test h1</h1&gt...

css3 选择器 nth-child()选择问题

YdPro_的博客

06-27

360

nth-child() 是一个伪类选择器，它并不会按照标签的顺序进行选择，而是按照顺序进行选择 #例子: <!DOCTYPE html> <html> <head> <style> p:nth-child(8) # 先根据顺序选择第8行，在检查它是否是p元素，如果是p就是红色，父元素是body { background:#ff0000; } </style> </head> <body> <h1>这是标题&

css选择器之-of-type 以及nth- 补充

a8725585的博客

11-09

714

-of-type 限制类型 p:first-of-type; p:nth-of-type(n); 如上计算时只计算p标签不是p标签的不计算在内 p:first-of-type { background:#ff0000; } p:first-child { background:#ff0000; } :first-child 不限制类型所以h1标签也属于p父标签子标签既

小于等于N的全部整数与N关于gcd(i,N)的那些事

aoe41606的博客

02-16

294

css3选择器nth-of-type属性作用及用法剖析

前端开发UI设计老司机-艾斯视觉

03-05

1599

CSS3中的nth-of-type选择器允许我们根据元素类型和位置来定位特定的元素。本文将深入探讨nth-of-type属性的作用，并提供详细的用法示例。

css简易的进度条

qq_45723045的博客

10-22

845

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...

对于nth-of-type(n)的理解

corn78的博客

11-24

9824

定义和用法： :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。一、nth-of-type(n) (当n为数字时）先看下代码，在代码中具体讲解。这里我们在一个类名为father的盒子中写了五个p标签，样式表中用到了我们的nth-of-type伪类，这个样式也不难看懂。我们把这个选择器拆分开来理解，首先.father...

HTML5基础加强css样式篇（结构化伪类选择器：nth-of-type）（十一）

余正源的博客

03-15

1174

1.nth-of-type简单使用： HTML5初级阶段 .box { /*Add your CSS*/ } table { width: 100%; border: 1px solid #f0f0f0; border-

CSS中 nth-child 与 nth-of-type 的区别