关于nth-child的疑惑 由 Ghostzhang 发表于 2015-04-20 23:20 今天在CSS森林群有同学问了个问题： 【活跃】ζ”綉;財ヾ nth-child 怎么选前三个 【...活跃】Davin :nth-child(-n+3) 【吐槽】鬼-CSSForest +4 正好很久没写代码了，也想试试回答下这个问题，于是就搜索了下，于是就找到了 W3School的CSS3 :nth-child...span:nth-child(-n+3) 匹配前三个子元素中的span元素。...也就是说nth-child从最大的父元素”body”开始，匹配“an+b”个元素，如果里面包含”element”，则对其应用样式规则。...不会在乎前面是什么标签 【吐槽】鬼-CSSForest 很容易误解啊，p:nth-child(-n+3) 不会理解成前三个p吗？
:nth-child匹配下标满足条件的子元素。... 来匹配下标满足如下条件的元素 第1个 li:first-child 第5个 li:nth-child...(5) 第1个到第5个 li:nth-child(-n+5) 第6个到最后 li:nth-child(n+6) 最后1个 li:last-child 倒数第二个 li:nth-last-child...(2) 奇数个 li:nth-child(odd) 或 li:nth-child(2n+1) 偶数个 li:nth-child(even) 或 li:nth-child(2n) 兼容性 IE9+，...让IE6+支持:nth-child方法是，可以用selectivizr 其他 :nth Tester 帮助理解:nth-child和:nth-of-type the-difference-between-nth-child-and-nth-of-type
做前端一定要记住:nth-child(2)这个选择器，它可以帮你轻松选择你想要的标签并给与修改添加样式 下面通过几个例子说明，相信你一看就明白 li:nth-child(2){background:#090...} :nth-child(2)表示选取第几个标签，”2可以是你想要的数字” li:nth-child(n+4){background:#090} :nth-child(n+4)选取大于等于4标签，”n”...表示从整数 li:nth-child(-n+4){background:#090} :nth-child(-n+4)选取小于等于4标签 li:nth-child(2n){background:#090}...:nth-child(2n)选取偶数标签，2n也可以是even li:nth-child(2n-1){background:#090} :nth-child(2n-1)选取奇数标签，2n-1可以是odd...li:nth-child(3n+1){background:#090} :nth-child(3n+1)自定义选取标签，3n+1表示”隔二取一” li:last-child{background:#090
nth-child 的一些小尝试 前言 对于 first-child 或者 last-child 等,还算比较常用.但是 nth-child 一般也就用隔行变色.一直不认为其有多强大的功能,甚至认为其比较鸡肋...DOCTYPE html> nth-child test <body...(1){background: #fda;} li:nth-child(3n){background: #daf;} li:nth-child(-n+4) {font-weight: bold...;} li:nth-child(5n){border-bottom: 1px solid #ddd;padding-bottom: 20px;margin-bottom: 20px;}...li:nth-child(n+5) {text-indent: 10px;} li:nth-child(3n+1) {color: #f00;} li:nth-child(3n-1) {
:nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，借助这个特性，可以实现选择第偶数次序的子元素、选择一定范围内的子元素等“批量选择操作”。...专注前端与算法的系列干货分享，转载请声明原创： 「微信公众号：心谭博客」| xxoo521.com | GitHub nth-child 介绍 :nth-child(n) 选择器匹配属于其父元素的第...(1) 用even/odd分别代表偶数 / 奇数：span:nth-child(even) 借助n自定义选择范围： nth-child(2n)/nth-child(2n + 1)：偶数 / 奇数 nth-child...比如选择第 6 个到第 9 个，就是：:nth-child(-n+9):nth-child(n+6) 注意：不是nth-child(2 - n)，-n要写在一起！ 子元素 !...所以在借助nth-child匹配子元素时，要看清楚 DOM 树的层级关系。
css3 nth-child选择器 css3的nth-child选择器，乍看起来很简单，其实不是那么容易。...简单用法 p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 元素 p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数 元素 p:nth-child...但是:nth-child(n+m)中的n+m是从1开始计算的,也就是说子元素的起始计算序号是1，不存在0这样子的元素。第一个元素就是1，不是0。...当我们要选择哪些元素的时候，只要把参数根据n的递增算出来的值对应到子元素在父元素里面的位置序列就好了 比如查找第一个元素 :nth-child(1) 查找序列大于等于10的元素 :nth-child(n
1、先看效果图 上图中比较麻烦的是每块的底色处理，下面看怎么处理 2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。...数字：最常见的使用方式，eg: :nth-child(1) 关键词: Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。...3、主要思路： 运用less混合传参，参数既是 :nth-child(n) 选择器的公式 在混合里面处理每个原色的底色，通过 :nth-child(n) 选择器结合 ::after 伪元素实现。...有了思路之后，下面让我们看一下具体的代码实现 4、代码实现 以下只贴颜色处理的核心代码 .colorLine(@index, @startColor, @endColor) { .li-item:nth-child
1.设置单双行 ul li:nth-child(odd){background-color:green;}/*设置单行样式*/ ul li:nth-child(even){background-color...:gray}/*设置双行样式*/ 2.设置每隔3个应用样式 ul li:nth-child(3n){background-color:green;}/* 3,6,9,12... */ 3.指定元素 ul...li:nth-child(4){background-color:green;}/*单独设置第四个li*/ 4.自定义起始元素 ul li:nth-child(3n+2){background-color...(n+number)形式 ul li:nth-child(n+6){background-color:green;}/*从第六个li开始匹配*/ ul li:nth-child(-n+6){background-color...:green;}/*匹配1-6的元素*/ 6.自定义区间 ul li:nth-child(n+3):nth-child(-n+5){background-color:green;}/*匹配3-5的元素
举例：第三行字体显示为蓝色，代码如下： li:nth-child(3){ color: blue; } nth-child(odd) nth-child(odd)：选择列表的奇数行。...nth-child(2n-1) 等。...: #999; } nth-child(even) nth-child(even)：选择列表的偶数行。...nth-child(2n) 。...举例：前三行背景色设置为绿色，代码如下： li:nth-child(-n+3){ background: #2cae1d; } nth-child(n+n) nth-child(n+n)：选择第
6 css部分: /* 表示选择列表中的标签从0到3，即小于3的标签 */ .key_box a:nth-child...color: green; } /* 表示选择列表中的标签从第3个开始一直到最后 */ .key_box a:nth-child.../* color: green; */ display: none; } 结果：（只显示3个，第三个开始隐藏掉了） 附： css3:nth-child...选取第几个标签元素 选择标签 选择第几个 nth-child(3) 选择第3个 nth-child(2n) 选择偶数标签 nth-child(2n-1) 选择奇数标签 nth-child(n+3) 选择从第...3个标签开始到最后 nth-child(-n+3) 选择从第0到3，即小于3的标签
首先他们都是属于结构伪类选择器，都可以键入公式、关键词、序号等 不过他们在指定查找元素时会小小的区别 nth-child:会将所有元素进行标号，当查找指定元素是，会先根据序号查找该元素，找到后在与伪类前面的元素进行匹配...，匹配一致才赋予样式 如下 nth-child section div:nth-child...1 2 3 与nth-child
当我们把 nth-child 这个选择器用到极致的时候,可以说,我们在处理任何列表的时候,是不需要给这些列加上class的. 有哪些 nth-child ?...今天,我们着重来讲的是 nth-child nth-child研究开始 为了简单方便,我下面用这种方式在文章中演示我需要的效果 ○●○○○○○○○○12345678910 如上表所示: ○ 代表没有选中...ul.list li:nth-child(n+4):nth-child(-n+8){background: #000;} 这里,其实就是把前面两种方法给集成了一下....看好了 ul.list li:nth-child(2n+1):nth-child(n+4):nth-child(-n+8){background: #000;} 好,就是组合上面的多种条件,来达到我们需要的选择范围...选择第三个到第九个之间的奇数行(包括3\9) ○○●○●○●○●○12345678910 ul.list li:nth-child(2n+1):nth-child(n+3):nth-child(-n+9
可以用 CSS 选择器 nth-child 来实现： nth-child 有不少扩展应用，比如： nth-child(odd) 匹配奇数个（1、3、5）。...nth-child(odd) 匹配偶数个（2、4、6）。 nth-child(3n) 匹配3的倍数个（3、6、9）。 nth-child(3n+1) 匹配3的倍数加1个（1、7、10）。 ?...(10n-0),.icon>li:nth-child(10n-1),.icon>li:nth-child(10n-2),.icon>li:nth-child(10n-3),.icon>li:nth-child...(10n-4){ border-bottom: 1px solid #ccc; } 主要是通过 .icon>li:nth-child(10n-0),.icon>li:nth-child(10n-...1),.icon>li:nth-child(10n-2),.icon>li:nth-child(10n-3),.icon>li:nth-child(10n-4) 选中第 678910 个，设置下边框。
nth-last-of-type() 选择器 规定属于其父元素的第二个 p 元素的每个 p，从最后一个子元素开始计数： p:nth-last-of-type(2) { background:#ff0000; } 对于:nth-child...选择器，在简单白话文中，意味着选择一个元素： 这是个段落元素 这是父标签的第二个孩子元素 对于:nth-of-type选择器，意味着选择一个元素： 选择父标签的第二个段落子元素 例子： p:nth-child...您可以狠狠地点击这里：:nth-child测试demo2 p:nth-of-type(2)的表现显得很坚挺，其把希望渲染的第二个p标签染红了，如下截图： ?
Document .box1 p:nth-child
一、零碎 1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child... 2、其次找到父类下的第n个子元素 3、最后看该子元素是不是1中的伪类调用者，如果是，则应用css，否则不应用 ----》有时候first-child或者nth-child...important; } ========================================================== .tab_con:nth-child(1){ background
CSS3新增选择器 1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 .list div:nth-child...E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 ?
(6) > ul > li:nth-child(2) > a", 371 "#side_nav > div.w_l:nth-child(6) > ul > li:nth-child(...:nth-child(6) > ul > li:nth-child(3) > a" 534 ], 535 "#side_nav > div.w_l:nth-child(6...) > ul > li:nth-child(2)": [ 536 "#side_nav > div.w_l:nth-child(6) > ul > li:nth-child(2) >...div.w_l:nth-child(6) > ul > li:nth-child(6)": [ 542 "#side_nav > div.w_l:nth-child(6) > ul...> li:nth-child(6) > a" 543 ], 544 "#side_nav > div.w_l:nth-child(6) > ul > li:nth-child
(2){ -webkit-animation-delay:0.2s; } .loading span:nth-child(3){...:0.6s; } .loading span:nth-child(5){ -webkit-animation-delay:0.8s;...} .loading span:nth-child(5){ -webkit-animation-delay:0.65s; } .loading...} .loading span:nth-child(5){ -webkit-animation-delay:0.65s; } .loading...} .loading span:nth-child(5){ -webkit-animation-delay:0.65s; } 第9-10
nth-child(6):before { background: #d90000; } .rose:nth-child(2) .pedal:nth-child(7) { -webkit-animation...nth-child(6):before { background: #d10000; } .rose:nth-child(4) .pedal:nth-child(7) { -webkit-animation...nth-child(6):before { background: #a60000; } .rose:nth-child(6) .pedal:nth-child(7) { -webkit-animation...1 10s forwards 0s; } .rose:nth-child(7) .pedal:nth-child(1):before { background: #f70000; } .rose:nth-child...2 10s forwards 0s; } .rose:nth-child(7) .pedal:nth-child(2):before { background: #dc0000; } .rose:nth-child
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
