CSS中div:nth-child(n) 与 div＞:nth-child(n) 的区别

最新推荐文章于 2022-09-20 16:41:52 发布
最新推荐文章于 2022-09-20 16:41:52 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bestadc/article/details/115872758
版权

说下div:nth-child(n) 与 div>:nth-child(n) 的区别

div:nth-child(n) 
表示：寻找父元素的第n个子元素是div
div>:nth-child(n)
表示：父元素div的第n个子元素，子元素是什么都可以
bestadc
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3中:nth-child和:nth-of-type的区别深入理解
12-13
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3，才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？ 其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素， 而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。 这里附上一个小例子： 复制代码代码如下: <div> <ul clas
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
09-25
css3的强大，让人惊叹，今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式，具体的详细示例可以参考下文，希望对大家有所帮助
div第二个元素css,CSS nth-child() 给连续的几个DIV元素赋不同的背景色
weixin_39786617的博客
08-03 1578
如上 想给ID==OutSide的div下的九个div分别赋上不同的颜色以行程九宫格。这时用到了nth-child()在样式里这样写#OutSide div:nth-child(1){ background-color: red;}#OutSide div :nth-child(2){ background-color: blue;}#OutSide div :nth-child(3){ back...
css中的【nth-child】用法总结
weixin_43343144的博客
08-01 761
官方文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child 参考以下案例更直观 <!DOCTYPE html> <html lang="en-US" prefix="og: https://ogp.me/ns#"> <!-- nth-child总结： 1、这里是div.detail-txt的子元素【>】 而不是全部后代元素 2、这里是div:nth-child全部兄弟元素排序【但是div
css中:nth-child()和nth-of-type有何区别详解
李十三的博客
07-26 522
伪类选择器的区别
如何获得div的child
SUN Jiangong's technical blog
05-04 874
/******************************by Jiangong SUN****************************/ 见图下所示:
div:nth-child(n)
weixin_40626699的博客
04-03 4764
指当前div的第n个子元素，n是从1开始 例： <div> <p>test1</p> <p>test2</p> <div> div:nth-child(2)是指第二个p标签
:nth-child(n) 选择器
weixin_41548610的博客
08-11 2043
定义 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 用法 1、p:nth-child(2)表示匹配p标签的父元素的第2个子元素是否为p标签，如是的话则选中，否则无效。 2、当:nth-child(n)前面加空格时，其含义为从当前元素的子孙后代中所有元素的第n个子元素选出来。 ...
CSS3 :nth-child() 选择器
blogscsdn的博客
08-16 860
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 选取#demo第一个子元素p 如果你以为我会被选中变红，那你就猜错了 落后的浏览器 落后的浏览器 落后的浏览器... #demo p:nth-child(1){ color:#f00; }   &nbsp
几张图浅理解（会用） :nth-child()
a666666000的博客
09-20 1897
几张图带你浅理解（会用） :nth-child()
:nth-child和:nth-of-type的区别
潜行IT的博客
10-10 6789
:nth-child()表示父元素下的第n个子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素则没有匹配的元素 　:nth-of-type()表示父元素下的第ｎ个类型的元素　比如div p:nth-of-type(2)表示div下的第二个ｐ元素。 基本代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;hea...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} </style> <div> <ul> <li>11</li> <li>22</li> <li>33</li> </ul> </div> 二、预览效果 如上图
详解CSS nth-child与nth-of-type的元素查找方式
01-19
nth-child和nth-of-type是css的两个伪选择符。应用中，这两者常常容易混淆。这里把它们拿出来仔细做个对比，看看这两者是怎么查找元素的。 nth-child(n) —— 寻找第n个子元素 nth-of-type(n) —— 寻找同一类型...
nth-grid:Nth Grid是功能强大的网格系统，可让您创建语义的水平或垂直网格布局
05-07
第N格 Nth Grid是一个易于使用但功能强大的基于Flexbox的Sass网格混合框架。 Nth Grid允许您仅使用2个简单易用的mixins来创建水平和垂直网格布局。 您可以自由使用自己的标记，并且没有负边距， .last类等。我们...
css 选择器（选择第几倍的元素），nth-child（2n+1）
PrimaryColor
09-18 5960
直接上代码： 选择2倍的第一个元素： div:nth-child(2n+1) 选择2倍的第二个元素： div:nth-child(2n+2) 选择3倍的第一个元素： div:nth-child(3n+1) 选择3倍的第二个元素： div:nth-child(3n+2) 选择3倍的第三个元素： div:nth-child(3n+3) 以此类推。 ...
【css】8.nth-child(2)
jieweiwujie的博客
12-28 845
div:nth-child(1)
css奇数偶数选择器
热门推荐
web前端开发
11-30 3万+
前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。主要用的：:nth-of-type或者:nth-c...
CSS选择器之div:first-child&div :first-child
weixin_44249574的博客
07-30 9790
div:first-child&div :first-child的区别 div:first-child属于组合选择器 既满足是div元素，又满足是父级元素的“第一个孩子”，至于父级元素是谁，无所谓。 div :first-child属于后代选择器 必须是div元素的“第一个孩子”，父级元素明确要求是div元素，至于“第一个孩子”是什么元素，无所谓。 div:first-child <!DOCTYPE html> <html lang="en"> <head>
CSS高级技巧
CC的博客
05-19 967
精灵图 1.为什么需要精灵图： 核心原理：将网页中的一些小背景整合到一张大图中，这样服务器只需要请求一次 目的：为了有效减少服务器接收和发送请求次数，提高页面的加载速度 2.精灵图的使用 核心：主要针对背景图片使用 （需要精确测量） 实践：使用精灵图拼出自己的名字 代码： html： <div class="jingling"> <div class="c"></div> ...
div:nth-child(2)
最新发布
08-17
引用中的代码示例展示了一个Vue组件中使用了div:nth-child(2)选择器来对第二个div元素进行样式设置。在该示例中，div:nth-child(2)选择器被用于设置第二个div元素的样式。具体样式如下： div:nth-child(2) { border: 1px solid #C54242; border-radius: 4px; width: 68px; height: 32px; line-height: 30px; font-size: 14px; color: #ffffff; margin-left: 20px; background-color: #c54242; cursor: pointer; } 该选择器用于选中父元素下的第二个div元素，并为其设置指定的样式。在这个例子中，第二个div元素被设置了边框样式、背景颜色、字体颜色等。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [CSS3伪类子代选择器nth-child()的用法](https://blog.csdn.net/qq_44754635/article/details/124815510)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【css】8.nth-child(2)](https://blog.csdn.net/jieweiwujie/article/details/121392746)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式](https://download.csdn.net/download/weixin_38614812/12886340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值