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

html-css012

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) {......}  /*--这是偶数行--*/

css控制table单双行的方法是获取到行号。

<style type="text/css">

#tb tr {

background-color: expression(

this.sectionRowIndex % 2 == 0 ? "#fff" : "#efefef"

)

TableSelect: expression(

this.sectionRowIndex == 0 ? "" :

(

onmouseover = function()

{

this.style.backgroundColor="#69CDFF"

},

onmouseout = function()

{

var color

if(this.sectionRowIndex % 2 == 0){

color = "#fff"

} else {

color = "#efefef"

}

this.style.backgroundColor=color

}

)

)

}

</style>

table如下:

<body>

<table cellspacing="1" class="FindAreaTable1" ID="DataGrid1">

<tr>

<td>首行首列</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

</tr>

<tr>

<td>行1首列</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

</tr>

<tr>

<td>行2首列</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

</tr>

<tr>

<td>行3首列</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

</tr>

<tr>

<td>行4首列</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

</tr>

<tr>

<td>行5首列</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

</tr>

</table>

</body>

</html>