首页 >

css修改奇数列背景 |前端css开发实例

css实战困难,字体不能居中 css,ionic+css怎么写,css及分类作用范围,css向下步骤流程样式,js方法为css添加样式,前端css开发实例css修改奇数列背景 |前端css开发实例

下面大家来看一下如何使用CSS来实现这一效果。大家可以先给表格中的奇数行设置一个背景色,然后再给偶数行设置另一个背景色。这里大家使用CSS伪类选择器:nth-child()来实现:

table tr:nth-child(odd) {
background-color: lightblue;
}
table tr:nth-child(even) {
background-color: lightgray;
}

上面的代码中,table表示大家要修改背景色的表格,tr表示表格的行,:nth-child()则是伪类选择器,其中”odd”表示奇数行,”even”表示偶数行。然后就可以分别设置这两种行的背景色了。在这里大家使用了lightblue和lightgray两种颜色,这两种颜色可以根据自己的需要进行调整。

除了使用:nth-child()选择器之外,还可以使用:nth-of-type()选择器来进行表格的样式修改。使用方法与:nth-child()选择器类似,只是选择的对象变成了表格中每个单元格的类型。

以上就是使用CSS来修改表格奇数行和偶数行背景色的方法。这个方法简单易学,而且效果非常不错。在实际的网页制作中,大家可以根据自己的需要来进行调整,以达到最佳的美化效果。


css修改奇数列背景 |前端css开发实例
  • div悬浮+css.txt |css3 动画 from to
  • div悬浮+css.txt |css3 动画 from to | div悬浮+css.txt |css3 动画 from to ...

    css修改奇数列背景 |前端css开发实例
  • css复选框圆形边框 |css3 图片渐渐变亮
  • css复选框圆形边框 |css3 图片渐渐变亮 | css复选框圆形边框 |css3 图片渐渐变亮 ...

    css修改奇数列背景 |前端css开发实例
  • css工业 |css li ul
  • css工业 |css li ul | css工业 |css li ul ...