css3伪类:nth-child(),用伪类给奇数行和偶数行的li标签添加不同背景色

上才艺

用伪类给奇数行和偶数行的li标签添加不同背景色

	/*偶数行样式  */
	.aaa :nth-child(even) {   
	    background-color: rgb(177, 239, 255);
	}
	
	/*奇数行样式  */
	.aaa :nth-child(odd) {
	    background-color: rgb(184, 177, 177);
	}

	<ul class="aaa">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

效果如下：

:nth-child()的其他用法：

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
:nth-child(3n+0)使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。