关于:nth-child(n) nth of type

最新推荐文章于 2021-12-03 17:08:13 发布
最新推荐文章于 2021-12-03 17:08:13 发布
阅读量137 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m18697787579/article/details/121338300
版权

nth-child(n+2) 选中第二个开始的子元素
nth-child(-n+2) 选中前两个子元素
:nth-child(n+6):nth-child(-n+7) 选中第6第7个子元素
:nth-child(odd)子元素中的奇数
:nth-child(even)偶数
ul li:nth of type（1） ul中的第一个li 如果不指定li的话会选择所有元素 ，
ul li：nth-child(2) ul下的第二个li元素 ，不指定li的话会选择ul下第二个元素

番茄炒蛋多加米饭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css :nth-child与:nth-of-type之小解
09-25
`:nth-of-type()`选择器则有所不同，它专门选取父元素中指定类型的第n个子元素。同样以索引1开始计算。例如，`p:nth-of-type(2)`会选择父元素中第二个`<p>`元素。在上述示例中，即使`<section>`的第一个子元素是`...
CSS3中:nth-child和:nth-of-type的区别深入理解
09-25
在CSS3中，`:nth-child` 和 `:nth-of-type` 都是用于选择具有特定索引位置的元素，但它们之间存在着微妙的区别，这些差异往往会在复杂的布局和选择器应用中体现出来。深入理解这两个伪类对于创建精确、动态的CSS样式...
css选择器:nth-child(n)选择前几个元素
WANGBUZHIQ的博客
11-22 8758
学习记录2 css选择器:nth-child(n)选择前几个元素 如：在项目中要实现如下效果 在三列布局中间加边框线，只使用border-right是不行的，三个div都会被选中，因此使用css选择器给前两个div进行添加样式，实现代码如下： .totalShow > div:nth-child(-n+2) { border-right: 1px solid #E4E7ED; } 其中 >大于号代表只选择下一代子元素 (-n+2) 代表选择前两个。 针对nth-ch
CSS3 选择前几个元素
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
11-25 388
/* 选择第n个，n位数字 */ :nth-child(n) 选择列表中的偶数标签 :nth-child(2n) 选择列表中的奇数标签 :nth-child(2n-1) 选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的，直到最后 */ :nth-child(n+6){} 两者结合使用，可以限制选择某一个范围 /*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */ :nt
li:nth-child(1)---div:nth-child(-n+2) 详解
Alisa_wu666的博客
09-08 3545
我总是会有点奇葩的烦恼，如果看这个列子会更加明白 $("#box li:nth-child(1)").css("color", "red"); 通俗的理解就是选择box 下面第一个li?后面自己写了一次，发现不对，ppp下面的每个li 都被选中了 <div id="box"> <ul> <li>John1</li> <li>Karl</li> <li>B.
html伪类只选择前两个,CSS3伪类选择器:nth-child()类似循环的一个伪类
weixin_30009115的博客
06-04 469
:nth-child可以实现类似于php里的while()的循环功能，是非常方便的。我用了IE8和Chrome这两个浏览器来测试它们到底支不支持:nth-child。结果是Chrome支持，但IE8不支持。:nth-child()的括号里面还有一些其他的选择，这里只是列举了一些。这个函数是不错，不过只可惜IE8不支持，不过这种效果也可以用javascript来实现，用哪一种方法就见仁见智了。123...
CSS3 - :nth-child()选择前几个元素
shy256的博客
12-03 704
/* 选择第n个，n位数字 */ :nth-child(n) 选择列表中的偶数标签 :nth-child(2n) 选择列表中的奇数标签 :nth-child(2n-1) 选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的，直到最后 */ :nth-child(n+6){} 两者结合使用，可以限制选择某一个范围 /*【限制范围】选择第6个到第9个，取两者的交集【感谢小伙伴的纠正~】 */ :n...
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...
CSS选择除第一个和最后两个以外的所有子元素 + 结构伪类选择器深度解析
JZevin的博客
07-16 1万+
最近在练习网易严选首页的布局时，发现它的顶部导航栏需求很特殊，第一项和最后两项是没有下拉选择框的。那么问题来了，在写css的时候该怎么使用选择器去达到这样的需求呢!？ 首先先贴一下我最后的解决方案： .nav-first>li:nth-child(n+2):not(:nth-last-child(-n+2)):hover .nav-second { display: block; } 其中核心是：:nth-child(n+2):not(:nth-last-child(-n+2)) :nth-c
nth-child的使用方法
热门推荐
Evan's Blog ٩(๑❛ᴗ❛๑)۶
06-09 8万+
一、需求描述 在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。 我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。 二、使用方法的代码示例 1.常见使用方法 first-child first-child：选择列表中的第一个标签。 举例：第一行字体显示为红色，代码如下： li:first-child{ c
CSS: nth-child()选择前几个元素
weixin_39015132的博客
08-24 6万+
原文链接 前言 渲染列表时，需要设置前3个元素的margin-top值与其他的不同。 使用 :nth-child(-n+3){ margin-top: 12px; } 扩展 选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的 */ :nth-c...
css中选取子元素
生存不忘生活
08-08 5744
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
CSS: :last-child 与 :first-child的坑
weixin_39015132的博客
07-23 5万+
原文链接 前言 前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器， 但是在实际使用中，要特别需要注意一个点。 开始 :last-child:指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述） 实践 HTML: <div class="div1"&gt...
css选择器:nth-child()的用法
得意小门生的博客
10-13 6万+
:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 一、选择列表中的偶数标签:nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的，直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 五、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-chil
CSS3:nth-child(n)与nth-child(2n+1)中n的区别。
xiongqiangwin1314的专栏
07-26 1万+
索引为0，为父元素ul的第一个元素。 索引为1，为父元素ul的第二个元素。 索引为2，为父元素ul的第三个元素。 索引为3，为父元素ul的第四个元素。 索引为4，为父元素ul的第五个元素。 索引为5，为父元素ul的第六个元素。 索引为6，为父元素ul的第七个元素。 索引为7，为父元素ul的第八个元素。 索引为8，为父元素ul的第九个元素。 索引
css3: nth-child(n)解析
王小贱的博客
05-13 1045
语法： E:nth-child(n){ sRules } * 匹配父元素索引为n的子元素E :nth-child(n) 让你匹配到父元素的任一子元素： Figure 1: 常规用法 DEMO             选取ul第一个子元素li                      如果我是红色，说明你的选择到了我，浏览器还颇为先进             落后的浏
CSS3 :nth-child(n)使用注意
weixin_34319817的博客
03-23 3341
:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素； p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素 注意：n是从1开始的 如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个...
:nth-child和:nth-of-type区别
最新发布
10-13
:nth-child和:nth-of-type都是CSS选择器中的伪类，用于选择某个元素在其父元素中的位置。它们的区别在于： - :nth-child(n)选择器选取的是父元素下的第n个子元素，无论它是什么类型的元素。 - :nth-of-type(n)选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值