css3 nth-child的妙用

最新推荐文章于 2024-08-13 11:51:44 发布
最新推荐文章于 2024-08-13 11:51:44 发布
阅读量103 收藏
点赞数
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28671617/article/details/125219077
版权

CSS3 nth-child()选择元素

一、选择列表中的偶数标签  :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)

猿者上钩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html nthchild作用,详解CSS中:nth-child的用法
weixin_31129821的博客
06-18 4572
前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途：Tips：还用低版本的IE浏览器的哥们请绕过！:nth-child(2)选取第几个标签，“2可以是你想要的数字”.demo01 li:nth-child(2){background:#090}:n...
css nth-child(n)妙用
cai_niao5623的博客
11-15 284
经常在写样式的时候会碰到各种业务需求，比如选中后3个元素，前2个元素，奇数元素，偶数元素等等，在这里做个总结吧 1、选择奇数元素、偶数元素 /* 选择奇数元素 */ li:nth-child(odd) { background-color: green; } /* 选择偶数元素 */ li:nth-child(even) { background-color: hotpink; } 2、选择第3个元素、倒数第3个元素 /* 选择第3个元素 */ li:nth-child(3) {
css中nth-child的使用注意
weixin_34127717的博客
05-20 720
代码:总结:item:nth-child(2)是什么意思，选择的是什么元素?它的意思是:首先选中的元素必须要具有.item类名，并且该元素是某一个元素的第二个子元素所以我们看到上面是第二个图形变红色:nth-child(n),其中的n填入的是.item在兄弟元素中排的索引，而不是针对具有.item类名的几个兄弟元素中的索引，注意n是从1开始 转载于:https://...
CSS nth-of-type和nth-child的区别是什么？
benli8541的博客
01-15 348
区别：两种匹配的元素不同，“:nth-of-type(n)”选择器是匹配属于父元素的特定类型的第N个子元素，元素类型是有限制的；而“:nth-child(n)”选择器是匹配属于其父元素的第N个子元素，元素类型是没有限制的。 （推荐教程：CSS视频教程） 1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。 2、:nth-of-type(n) :nth-of-type(n)选择器匹配属于父元素的特定类型的第N
css3中nth-child()的用法
m0_52518047的博客
04-23 1万+
nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型。重点是“不论元素的类型这句话”，好多人容易误解这句话。 现在提出一个需求，如下图所示，将第二行和第三行的字体颜色改为红色和蓝色 <div class="father1"> <p>1234</p> <p>12345</p> <p>12345</p> </div> css代码实现：很容易
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
CSS-nth-child
03-26
在表格或列表中，可以使用`nth-child(even)`和`nth-child(odd)`为奇数行和偶数行设置不同的背景色，增加可读性。 ```css tr:nth-child(even) { background-color: lightgray; } tr:nth-child(odd) { background-...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
本篇文章将深入探讨如何解决IE8下CSS3选择器`nth-child()`不兼容的问题，并介绍一些相关的CSS选择器。 `nth-child()`选择器是CSS3引入的一个强大工具，允许我们根据元素在同级元素中的位置来应用样式。例如，`nth-...
css :nth-child与:nth-of-type之小解
09-25
CSS中的`:nth-child()`和`:nth-of-type()`是两种选择器，它们在选取HTML元素时有不同的侧重和行为。本文将详细解析这两个选择器的工作原理及其差异。 `:nth-child()`选择器用于选取父元素中具有特定索引位置的子...
CSS3 :nth-child(n)使用注意
热门推荐
IT技术宅-北方的刀郎
02-07 4万+
:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素； p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素 注意：n是从1开始的 如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素
详解CSS中:nth-child的用法_大前端
sinat_22498107的博客
11-11 1106
http://www.daqianduan.com/3737.html 前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途： Tips：还用低版本的IE浏览器的哥们请绕过！ :nth-child(2)选取第几个标签，“2可以是你想要的数字...
:nth-child和:nth-of-type的区别
潜行IT的博客
10-10 6860
: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...
全网最详细的nth-child和:nth-of-type的区别(特别是nth-of-type)
JokerSoulClub的博客
02-24 6307
:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置然后匹配选择器 结合以下样例 <!DOCTYPE html> <html> <he
一些css的东西，看到，然后收集。。。
08-07 540
1. * {     margin: 0;     padding: 0;    } 星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。 *选择符也可以在子选择器中使用。 #contai
详解CSS3中:nth-child的用法
z983002710的博客
06-30 1万+
详解CSS3中:nth-child的用法
30个最常用css选择器解析
weixin_33700350的博客
09-22 223
你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。 1. * * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元...
css实现水滴效果图
yinge0508的博客
08-12 599
【代码】css实现水滴效果图。
木舟0基础学习Java的第二十四天(CSS,JS，Jquery)
最新发布
tzh525的博客
08-13 297
JS全称JavaScript 是一种基于对象，事件驱动的脚本语言。id选择器：同一个id选择器在同一页面中只能调用一次。标签选择器：直接应用于HTML标签。类选择器：可以在页面当中多次使用。
css的nth-child
11-23
CSS的nth-child选择器可以选择父元素中的第n个子元素，无论其元素类型是什么。其中n可以是数字、关键字odd（奇数）或even（偶数），也可以是公式an+b的形式。公式中的a和b是整数，n是计数器（从0开始）。需要注意的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值