css有办法选中奇数或者偶数的元素么

html-css040

css有办法选中奇数或者偶数的元素么,第1张

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

        }

    }

}