1、首先打开Vscode编辑器,新建一个HTML文档,用于承载表格和CSS。
2、然后新建一个5行3列的<table>表格备用。
3、接着定义一个内联样式,设置table表格的偶数行even背景色为浅灰色,奇数行odd的背景色为蓝色。
4、保存以上内容,在浏览器预览效果,就能看到奇数行景色为蓝色,偶数行背景色为浅灰色的效果了。
li:nth-of-type(odd) {......} /*--这是奇数行--*/li:nth-of-type(even) {......} /*--这是偶数行--*/
<ul class='list'><li>odd</li>
<li>even</li>
<li>odd</li>
<li>even</li>
<li>odd</li>
<li>even</li>
<li>odd</li>
<li>even</li>
<li>odd</li>
<li>even</li>
</ul> $odd: red
$even: blue
.list {
li {
&:nth-child(odd) {
background-color: $odd
}
&:nth-child(even) {
background-color: $even
}
}
}