当前位置: 首页 » 代码 » CSS » CSS nth-child用法详解

CSS nth-child用法详解

发布时间:2017-03-28

CSS 代码

,

热度:78

HTML5CSS3的前端开发中,我们时常会用到结构性伪类选择器:nth-child:nth-of-type,这两者的用法有许多相似之处,但也有不同,搞清楚这两者的区别,让我们在实际开发者能更快速和方便。

一、:nth-child(n)

定义:选择器匹配属于其父元素的第 n 个子元素,不论元素的类型,n1开始,n 可以是数字、关键词或公式————引自W3C

用法示例:

1.常规用法

#u1 li:nth-child(5) {
    background: #843534;
}

上述代码:ID为u1中第5个li元素背景为 #843534,如下图所示:

注意:但是当我们的html结构中如果混入了其他类型的元素,就会发现上述CSS失效了,特殊情况html

<ul id="u1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <div>5*</div>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

结果如下图:

究其原因,是因为在子元素中,序号为5的是div,而我们上面写的是li,所以浏览器无法找到序号为5li,所以如果我们要想改变5div的背景就因该写成这样:

#u1 div:nth-child(5) {
	background: #ffff00;
}

综上,我们再来看:nth-child的定义,不难理解,在父元素中,所有的子元素都是按照1-n的顺序,不论子元素是什么类型。

2.关键词用法

#u3 li:nth-child(odd) {
	background: #ff0000;
}

上述代码:ID为u3中所有奇数个li的背景为红色,即1,3,5,7,9……,如下图所示

#u4 li:nth-child(even) {
	background: green;
}

上述代码:IDu4中所有偶数个li的背景为绿色,即246810……,如下图所示

3.表达式用法

#u5 li:nth-child(3n) {
	background: deepskyblue;
}

上述代码:IDu5中所有3的倍数个li元素的背景色为蓝色,即36912……,如下图

同样的道理,在此基础上你可以改成4的倍数、5的倍数、7的倍数等等

表达式用法2

#u6 li:nth-child(3n+1) {
	background: yellowgreen;
}

上述代码:IDu6中所有3的倍数+1li元素的背景为黄绿色,即1471013……,如下图

上述:nth-child,起始元素的序号是从头部开始的,而相反的:nth-last-child的起始元素的序号是从尾部开始的,用法和上面的类似,只不过是倒数开始。

完整示例见:http://www.hawklu.com/test/nth-child.html

版权声明:本文为博主原创,未经允许请勿转载

去顶部