:nth-child()这个选择符括号内可以写+/- an + b （a，b均为整数）或者关键字

因为工作中有遇到要隐藏列表第三个子元素之后的所有子元素，所以有用到这个选择器，记录一下

(1) nth-child(a)

当括号里只写一个数字，比如 .list li:nth-child(2)，作用为选中父元素list的第二个子元素li标签，如果list的第二个子元素不是li标签，则选择符失效

.list li:nth-child(2) { color: #f00;
}

(2) nth-child(2n) / nth-child(2n+1)

括号内写2n就是选中list父元素的所有偶数项子元素list；2n+1就是选中所有奇数项子元素。

.list > li:nth-child(2n + 1){color: #f00;
}

(3) nth-child(even) / nth-child(odd)

括号内也允许使用关键字：odd代表奇数，even代表偶数。

.list > li:nth-child(even){color: #0f0;
}

(4) nth-child(+/-n+b)

n的作用是连续向后选中，b的作用是从第几个子元素开始。以.list li:nth-child(n+3)为例，将会选中第三个元素及之后的所有子元素

.list > li:nth-child(n + 3){color: #E6CC7E;
}

.list > li:nth-child(-n + 3){color: #E6CC7E;
}

CSS选择器（nth-child）相关推荐

nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
CSS选择器学习小结
前言: 半途出家做Front End,以前只是大概知道点,现在就必须从头把css好好看看啦,呜呜~~~~~~ 一.基本选择器序号选择器含义 1. * 通用元素选择器,匹配任何元素 2. E 标签 ...
“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？
本文翻译自:What does the "~" (tilde/squiggle/twiddle) CSS selector mean? Searching for the ~ ch ...
30个最常用css选择器解析
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
css a标签去掉下划线_这30个CSS选择器，你必须熟记（上）
CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色.布局.制作出漂亮的阴影效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举的实现,感觉就像魔法师一般, ...
html类选择器使用在什么场景,CSS选择器
**关键字: ** ** 1.css选择器使用场景; ** ** 2.css选择器优先级; ** 3. first-child和:first-of-type 1.class 和 id 的使用场景? c ...
css选择器按功能分,CSS 选择器
概览在 CSS 中,选择器用于选择需要添加样式的元素. CSS 选择器非常丰富,现将 CSS 1 - 3 目前所有的选择器列举如下. 选择器例子例子描述 CSS版本 .class .intro ...
HTML5 CSS选择器总结（强烈推荐）
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...

CSS选择器（nth-child）