css奇数和偶数选择器

 时间:2026-02-13 00:50:42

1、新建一个HTML文档,用于承载表格和CSS

css奇数和偶数选择器

2、新建一个5行3列的<table>表格

css奇数和偶数选择器

3、保存以上内容,在浏览器中预缝怕览效果,如图:

css奇数和偶数选择器

4、定义一个内联样式,设置<table>表格的偶数行(even)的背景色为浅灰色,示例:

    <style>

        table tr:nth-child(even){

            background: #ccc;

        }

    </style>

css奇数和偶数选择器

5、再次保存以上文件,在浏览特泪器预览效果,表格的偶数行(even)的背景色显示为浅灰色

css奇数和偶数选择器

6、再次修订内联样式,增加奇数行的背景色为蓝色,示例:

    <style>

        table tr:nth-child(even){/*偶数行*/

            background: #ccc;

        }

        table tr:nth-child(odd){/*奇数行*/

          轿腊蹲  background: #0000ff;

        }

    </style>

css奇数和偶数选择器

7、保存以上内容,再次在浏览器预览效果,

奇数行(odd)背景色为蓝色,

偶数行(even)背景色为浅灰色

css奇数和偶数选择器

  • 如何用CSS修改不同input标签的样式
  • HTML教程 预格式化标签(pre)的使用
  • 如何使我们的大学生活变得精彩
  • div+css 鼠标移到图片上显示文字内容
  • 如何用css创建li元素前面的三角形
  • 热门搜索
    教师节送什么礼物 pc是什么 大圆脸适合什么发型 2016年是什么年 什么是愚人节 loser什么意思中文 食道炎是什么症状 一个口一个客念什么字 手串什么材质的好 梦见杀猪是什么意思