为啥我的每个表格框的颜色也都会变?

为啥我的每个表格框的颜色也都会变?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>:nth-child()</title>
    <style type="text/css">
        /*此处补充样式*/
        table thead tr:nth-child(odd){
            background:#ff0;
        }
        table tbody tr:nth-child(odd){
            color:#0f0;
        }
        table tbody tr:nth-child(even){
            color:#f00;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0" width="200">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年纪</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>12</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>女</td>
                <td>11</td>
            </tr>
            <tr>
                <td>3</td>
                <td>赵五</td>
                <td>男</td>
                <td>12</td>
            </tr>
            <tr>
                <td>4</td>
                <td>王二</td>
                <td>男</td>
                <td>12</td>
            </tr>
        </tbody>  
    </table>
</body>
</html>

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕星星 2018-10-26 10:15:40

经测试显示效果如下:

http://img1.sycdn.imooc.com//climg/5bd2786000014e2802120149.jpg

你说的每个表格框颜色会变化是什么意思呢?是边框变颜色吗?这边测试并没有出现这种情况。使用的tr来完成的颜色变化,也就是每一行的字体颜色都会改变。但是颜色建议使用我们任务中要求的颜色哦:

http://img1.sycdn.imooc.com//climg/5bd2784900015b9805140195.jpg

祝学习愉快!

  • 提问者 全栈小磊 #1
    我在火狐浏览器测试的,每个表格的边框也都带着颜色,不知道为啥
    2018-10-26 10:17:44
  • 好帮手慕星星 回复 提问者 全栈小磊 #2
    经使用火狐浏览器测试确实出现了这种情况,每个浏览器解析的样式会有所不同,建议使用Chrome浏览器来测试。
    2018-10-26 10:46:06
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师