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

html-css017

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

1、首先打开Vscode编辑器,新建一个HTML文档,用于承载表格和CSS。

2、然后新建一个5行3列的<table>表格备用。

3、接着定义一个内联样式,设置table表格的偶数行even背景色为浅灰色,奇数行odd的背景色为蓝色。

4、保存以上内容,在浏览器预览效果,就能看到奇数行景色为蓝色,偶数行背景色为浅灰色的效果了。

可以啊,用css3或者jq实现。

可以使用css3的奇偶选择器,如:

tr:nth-child(odd){background-color:#FFE4C4}

tr:nth-child(even){background-color:#F0F0F0}

li:nth-child(odd)是设置奇数行的背景色,li:nth-child(even)是设置偶数行的。但是css3不兼容IE9以下的浏览器,如果需要考虑到兼容问题的话,可以使用jq设置,如:

$("table  tr:nth-child(even)").css("background-color","#FFE4C4")    //设置偶数行的背景色

$("table  tr:nth-child(odd)").css("background-color","#F0F0F0")    //设置奇数行的背景色

tr:nth-child(even) {background: #CCC}

tr:nth-child(odd) {background: #FFF}

要是兼容的话,可以分别定义偶数行样式和奇数行样式;