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

发布于 2017-07-20 10:26:11 字数 6407 浏览 2436 评论 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;
}

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

范围选择

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

: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;
}

: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;
}

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;
}

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;
}

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;
}

类型选择

: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; 
}

类型范围选择

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; 
}

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; 
}

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;
}

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; 
}

原文:http://nthmaster.com/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。