nth-child()与nth-of-type()区别

最新推荐文章于 2024-03-05 10:34:17 发布
最新推荐文章于 2024-03-05 10:34:17 发布
阅读量120 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50657441/article/details/109821302
版权

/
/ 区别
nth-child()会把所有盒子都排列序号
执行的时候首先看：nth-child(1)之后回去看前面的div
先看数字，再看元素

     nth-of-type()会把指定的元素先找到，在从里面按序号选出来
     先看类型，再看参数
    
    
    */
  1. hello wor
  2. hello wor
  3. hello wor
  4. hello wor
  5. hello wor
  6. hello wor
  7. hello wor
  8. hello wor

这是一个P标签

this is a p

这是一个P标签

这是一个P标签

这是一个P标签

这是一个P标签

这是一个P标签

这是一个P标签

sfhehf

这是一个P标签

这是一个P标签

这是一个P标签

-->

老大

老二
老三
m0_50657441
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
伪类 nth-child() 和 nth-of-type()
哈哩噜啾啾哈呀呀的博客
04-04 154
:nth-child(n)选择器 匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 这个选择器是先找前面元素的父元素，然后再找父元素下的第N个子元素，如果这个子元素和伪类前的选择器匹配，则添加相应样式，否则忽略。 <!DOCTYPE html> <html> <head> <style> p:nth-chil...
CSS中的选择器nth-child(n)和nth-of-type(n)的区别
qq_40890601的博客
05-17 1274
nth-child(n)和nth-of-type(n)的区别 区别就是后者多了一个类型限制，不计算前面出现的子元素。 举个栗子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> <style> span:nth-child(2) { color: #ff0000; } span:nth-of-type(2) {
nth-of-type() 详解
weixin_44051815的博客
12-29 1万+
nth-of-type() 详解 ele:nth-of-type(n)表示选择父元素下的第 n 个 ele 元素，其中 n 可以是正整数、公式或者关键字。同时， ele 一般是标签选择器。 <style> * { margin: 0; padding: 0; } .box { width: 400px; height: 200px; margin: 100px auto; border: 1px solid #ccc; }
CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child
MFWSCQ的博客
07-01 4463
CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...
nth-of-type的属性和用法
qq_51735681的博客
02-05 1万+
nth-of-type的属性和用法 一、先来介绍一下nth-child(n)的弊端： 我们可以先给一个div盒子，然后里面放上一些行内元素作为研究对象。代码如下： <div> <p>你好</p> <span>我是1span</span> <span>我是2span</span> <span>我是3span</span> </div&
css3选择器nth-of-type属性作用及用法剖析
最新发布
前端开发UI设计老司机-艾斯视觉
03-05 1483
CSS3中的nth-of-type选择器允许我们根据元素类型和位置来定位特定的元素。本文将深入探讨nth-of-type属性的作用，并提供详细的用法示例。
js选择器中:nth-of-child和:nth-of-type的区别
hvang1988的专栏
11-07 257
同级的多个元素，第y个是xx元素即xx:nth-child(y) 和 第y个xx元素 xx:nth-of-type(y) ；
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。...下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考借鉴，下面来一起看看吧。
详解CSS nth-child与nth-of-type的元素查找方式
01-19
nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型...
css :nth-child与:nth-of-type之小解
09-25
css :nth-child与:nth-of-type之小解,需要的朋友可以参考下。
详解css3中的:nth-of-type(n)
热门推荐
冰雪为融的博客
06-04 3万+
该选择器，虽然之前用的也不少，但感觉理解的不是特别好，使用的时候效率太低，所以今天就总结一下，嗯:nth-of-type() CSS 伪类   匹配同类型中的第n个同级兄弟元素。先来看个简单的例子理解一下上面的意思：HTML代码如下&lt;div id="wrap"&gt; &lt;p&gt;one&lt;/p&gt; &lt;div&gt;我是div&lt;/div&gt; ...
:nth-of-type理解
大赚万万亿
02-05 596
遇到nth-of-type,就要先按标签分类，比如对p,span,div进行分类，然后再开始数数
nth-child和nth-of-type
qq_40660257的博客
07-26 195
学习CSS的过程中，确实没有遇见过太大的问题，唯独CSS3中的这两个伪类选择器，看的我真的是一脸懵逼。刚开始以为很简单，没太细看，后来在实际使用的过程中，发现自己对他们根本是一知半解。每次想使用的时候都要查找相应的文档、博客之类的，我又实在是个怕麻烦的人，干脆一次性把它搞懂，因为有了我的第一篇博客。毕竟是第一次写，有错误欢迎大家批评指正，还有排版之类的，以后肯定会越来越好的，哈哈哈。 W3C...
：nth-of-type（n）和：nth-child（n）的基友关系
黑小Amui的博客
05-22 1万+
一开始写样式的时候喜欢全部元素都来个class，后面发现这样一个页面下来很多个class，起名字起到发慌，然后老师说该多用 逻辑关系来写样式，就是这种第几个孩子啊这种，不知道你们有没有这种烦恼，要用的时候觉得哇，type和child这两个傻傻难分。。。好了，入正题，其实可以从表面窥视到这两人的”内心“，且称他们为type先生和child先生，他们都以自己为重，顾名思义，type先生会关注type类...
CSS3 :nth-of-type() 选择器
damei2017的博客
09-03 953
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词。 p:nth-of-type(odd)奇数 { background:#ff0000; } p:nth-of-type(even)偶数 { background:#0000ff; }
CSS3中:nth-child和:nth-of-type的区别深入理解
心暖未晴
07-03 3185
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以”type”来区分的。也就是说：ele:nth-of-type(n)是指父元素下
nth-child(3n+5) 与 nth-child(5+3n)
xiamoziqian的博客
12-03 431
项目中需要将为标签设置单独的样式，最初我是这样写的 .goods:nth-child(5+3n){ margin-right: 0; } 结果发现没有生效，查手册发现css的规则只有 (an + b)，用（b + an）是不被识别的。这里改成 (5+3n) 就好了。 ...
nth-child(n)与nth-of-type(n)的区别
woai_mihoutao的博客
12-18 516
nth-child(n)与nth-of-type(n)的区别
nth-of-type()
weixin_42481234的博客
09-25 357
&lt;style&gt;  #Ulist li:nth-of-type(odd){    }奇数行    #Ulist li:nth-of-type(even){    }偶数行    &lt;style&gt;     
nth-of-type与nth-child区别
04-04
nth-of-type和nth-child都是伪类选择器，用于选取文档中特定位置的元素。 nth-child选择器选取父元素下的某个子元素，其参数可以是数值、关键词（如odd、even）或表达式（如2n+1）。 nth-of-type选择器则是选取父...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值