精通CSS3中的 :nth-child 伪类选择器 - 文章教程

精通CSS3中的 :nth-child 伪类选择器

发布于 2017-07-20 字数 6614 浏览 2268 评论 0

CSS 拥有很多选择器,其中伪类选择器是CSS3中心加入的,:nth-child 是众多伪类选择器中的一个,也是用法和变化最多的一种选择器,我们提供合适的参数,可以选择几乎所有任意的元素。

基本用法

可以设置一个具体的数字,选择某个指定数字索引的元素,注意这里的数字索引是从1开始计算,而不是我们通常认为的0。

:nth-child(8)

li:nth-child(8) span {
    background-color: #298EB2;
    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}

精通CSS3中的 :nth-child 伪类选择器

当设置一个数字的时候,他允许你具体的选择某个元素。

范围选择

节点元素选择器不仅可以打个选择,也可以范围性选择,请看下面的示例。

:nth-child(n+6)

li:nth-child(n+6) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

精通CSS3中的 :nth-child 伪类选择器

:nth-child(-n+9)

li:nth-child(-n+9) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

精通CSS3中的 :nth-child 伪类选择器

nth-child(n+4):nth-child(-n+8)

li:nth-child(n+4):nth-child(-n+8) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

精通CSS3中的 :nth-child 伪类选择器

nth-child(n+2):nth-child(odd):nth-child(-n+9)

li:nth-child(n+2):nth-child(odd):nth-child(-n+9) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

精通CSS3中的 :nth-child 伪类选择器

nth-child(3n+1):nth-child(even)

li:nth-child(n+2):nth-child(odd):nth-child(-n+9) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

精通CSS3中的 :nth-child 伪类选择器

类型选择

:nth-of-type(3)

/* these are represented with blue circles */
span:nth-of-type(3) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(4) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

精通CSS3中的 :nth-child 伪类选择器

类型范围选择

span:nth-of-type(n+3)
div:nth-of-type(2n+2)

/* these are represented with blue circles */
span:nth-of-type(n+3) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(2n+2) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

精通CSS3中的 :nth-child 伪类选择器

span:nth-of-type(-n+4)
div:nth-of-type(-n+5)

/* these are represented with blue circles */
span:nth-of-type(-n+4) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(-n+5) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

精通CSS3中的 :nth-child 伪类选择器

span:nth-of-type(n+3):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(-n+3)

/* these are represented with blue circles */
span:nth-of-type(n+3):nth-of-type(-n+6) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(n+1):n-th-of-type(-n+3) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

精通CSS3中的 :nth-child 伪类选择器

span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)

/* these are represented with blue circles */
span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+7) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(n+1):nth-ofo-type(even):nth-of-type(-n+3)  {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

精通CSS3中的 :nth-child 伪类选择器

原文:http://nthmaster.com/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0