初试css3的nth-child选择器

最新推荐文章于 2022-06-10 15:22:28 发布
最新推荐文章于 2022-06-10 15:22:28 发布
阅读量406 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxmmmmmm/article/details/80461362
版权

最近在看代码模板时遇到了nth-child，觉得挺好玩就查了一下。

nth-child：规定属于其父元素的子元素的css样式。

参数可以是：数字+n

如下图


意思为main-timeline的子元素，下标为2的倍数的所有timeline的padding：0 0 0 50px；

参数还可以是：odd和even

如下图


odd为奇数，even为偶数。分别定义了父元素下的子元素，下标为奇数和偶数两种不同的背景色。

wxmmmmmm
关注
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
12-11
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
本篇文章将深入探讨如何解决IE8下CSS3选择器`nth-child()`不兼容的问题，并介绍一些相关的CSS选择器。 `nth-child()`选择器是CSS3引入的一个强大工具，允许我们根据元素在同级元素中的位置来应用样式。例如，`nth-...
CSS3伪类选择器：nth-child()
manbufenglin的专栏
12-15 749
CSS3伪类选择器：nth-child()2009-03-04 21:52:32  来源:网页教学网 网页制作Webjx文章简介：CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。CSS3的强大，让人
CSS3 :nth-child() 选择器
hackerHL的博客
07-12 1036
最近做项目的时候，需要修改jqGrid源代码来修改外观，把模态框（弹出框）从原来的竖直显示变成多列显示，而jqGrid插件是自动根据绑定数据来生成前端样式的，由于对CSS并不熟悉，经过一整天才相处了解决办法nth-child()用于选择子元素 这是我原创的加入jqGrid源代码的css样式，会根据弹出框的显示条目数来自动决定是否浮动显示（即是直接垂直显示，还是分两列显示）.ui-jqdialog-
CSS3的 nth 元素选择器
ZPan的博客
03-28 917
CSS3的 nth 元素选择器: nth-child 和 nth-of-type 带有 child 带有 type only-child only-of-type first-child first-of-type last-child last-of-type n...
child常用选择器
pgLi
02-18 598
first-child 练习 父元素下首个子元素样式 .first-last-child > h5:first-child { background: #4dff3a; } last-child 父元素下最后一个子元素样式 .first-last-child > h5:last-child { background: #fbffbd; } nth-child(n) 匹配属于其父元素的第 N...
CSS3选择器 :nth-child(n) 详解
weixin_33968104的博客
09-07 361
CSS3 :nth-child(n): http://demo.doyoe.com/css3/nth-child(n)/ 浏览器参照基准：IE9, Firefox, Chrome, Safari, Opera 语法： E:nth-child(n){ sRules } 【n如果是具体数字则从1开始，如果是抽象的代数式则n从0开始】 * 匹配父元素索引为n的子元素E 【补充：】#paren...
jQuery中:nth-child选择器用法实例
12-04
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素，而:nth-child选择器将为每一个父元素匹配子...
详解CSS3中nth-child与nth-of-type的区别
09-24
在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。 但是它们到底有什么区别呢？下面这篇文章主要就给介绍了CSS3中nth-child与nth-of-type的区别,需要的朋友可以参考...
选择器——:only-child
Jener
08-11 693
这里我们测试下选择器——:only-child 理论：:only-child选择器匹配属于父级中唯一子元素的元素 测试1——body元素中只含有一个p标签 测试二 p:only-child{ color: magenta; } /*匹配属于父级元素中唯一子元素的p元素*/ 以body为直接父级的p元素 第一个p元素 以div为直接父级
CSS3的nth-child选择器
YITA90的专栏
06-03 1996
原文链接：https://grack.com/blog/2015/01/09/abusing-css3-selectors/ 如果你对这篇文章感兴趣，可以了解更多的有关 CSS4 的知识来提升自己。CSS3的:nth-child 和 :nth-last-child 选择器的神奇之处，不仅仅是可以替代 :first-child 和 :last-child 选择器，它还可以匹配更为复杂的子元素，比如
初试css3 calc 属性
jjsnc
06-02 422
<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title>测试calc</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> * { ma
html的选择器child,css child选择器妙用
weixin_39998462的博客
06-05 1349
css child选择器妙用：倒数第n，奇数列，偶数列，倍数列，第n个到最后，第一个到n1、first-childfirst-child表示选择列表中的第一个标签。2、last-childlast-child表示选择列表中的最后一个标签3、nth-child(3)表示选择列表中的第3个标签，上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。4、nth-child(2n) ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
weixin_39603613的博客
06-03 266
本篇文章给大家带来的内容是关于css3选择器child有哪些？css3选择器child用法详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。对于CSS3的结构伪类选择器，为了更好地让刚刚学习CSS3教程的新手能够理解，我们先来给大家讲解一下css3选择器child选择器。这些结构伪类选择器都很好理解，下面我们通过几个实例让大家感受一下这些选择器的用法。代码如下：CSS3结构伪类选...
CSS3 选择器—基本选择器
jeikerxiao
04-20 774
CSS 选择器CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分: 基本选择器 （常用） 属性选择器 伪类选择器 （这一部分也是最难理解和掌握的部分） 今天我们先来看第
css3奇偶选择
沧笙踏歌的博客
01-27 917
css3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可
css奇数偶数选择器_超详细！如何学习 CSS？需要学习那些知识点？
weixin_39797693的博客
11-29 280
很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），CSS是你最终希望在屏幕上显示的结果，所以值得合理去学习。因此，本文旨在概述CSS的关键基础和资源，以便进一步阅读现代CSS开发...
02 CSS3-选择器详解（二）
苏伟雄个人博客
11-29 187
选择器详解（二） 一，“-child”类型伪类选择器 1，:first-child 针对父元素的第一个子元素 2，:last-child 针对父元素的最后一个子元素 3，:nth-child（n） 1，针对顺序指定序号的子元素 2，针对奇偶性指定的子元素，odd奇数，even偶数 拓展： ：nth-child(n) 括号中的n 可依据 " αn + β "定律书写 "α"指每次循环中所包含...
child系列用法
yuqu1028的博客
06-10 1349
after、berore、child:first-child 匹配父元素中第一个子元素 :last-child 匹配父元素中最后一个子元素 :only-child 匹配父元素中仅有一个子元素的p元素 :nth-child(n) :匹配属于其父元素的第 N 个子元素，不论元素的类型 :nth-of-type(n) : 匹配属于父元素的第 N 个特定类型的子元素写在前面:伪类选择器，在使用id选择器以及类选择器时经常需要同时对多个不同特殊的标签进行属性设置，为了减少id和类选择器的使用次数，经常用child来选
css的nth-child选择器
最新发布
07-28
:nth-child() 是 CSS 中的一个伪类选择器，用于选取某个父元素下特定位置的子元素。 :nth-child(n) 会选取父元素下第 n 个子元素，无论元素的类型是什么。其中 n 是一个正整数，可以是具体的数字，也可以是关键词（如 even、odd 等）。 例如，如果要选择父元素下的第二个子元素，可以使用 :nth-child(2)。如果要选择父元素下的奇数位置的子元素，可以使用 :nth-child(odd)。 以下是一些使用 :nth-child() 的示例： ```css /* 选择父元素下的第三个子元素 */ .parent-element:nth-child(3) { /* CSS 属性 */ } /* 选择父元素下的偶数位置的子元素 */ .parent-element:nth-child(even) { /* CSS 属性 */ } ``` 需要注意的是，:nth-child() 是基于子元素在文档中的位置进行选择，不考虑其内容或其他属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值