Question

HTML中两个表格使用不同的CSS

比如我做两个表格，第一个表格使用定义好样式，而第二个我只想做个普通的表格，没有任何样式，请教应该怎么做？谢谢。
<style>
table tr:first-child{background:#0066CC; color:#fff;font-weight:bold;} /*第一行标题蓝色背景*/
table{border-top:1pt solid #C1DAD7;border-left:1pt solid #C1DAD7;margin: 0 auto;}
td{ padding:5px 10px; text-align:center;border-right:1pt solid #C1DAD7;border-bottom:1pt solid #C1DAD7;}
tr:nth-of-type(odd){ background:#F5FAFA;} /* odd 标识奇数行，even标识偶数行 */
tr:hover{ background: #E0F0F0;} /*鼠标悬停后表格背景颜色*/
</style>

第一个表格使用上面样式
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td><div align="left" class="STYLE1">neirong1</div></td>
</tr>
<tr>
<td><div align="left">neirong2</div></td>
</tr>
<tr>
<td><div align="left">neirong3</div></td>
</tr>
</tbody></table><br /><br/>
其他内容。。。。。

第二个表格不想使用上面的样式，只想做普通的表格。
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td><div align="left">neirong4</div></td>
</tr>
<tr>
<td><div align="left">neirong5</div></td>
</tr>
<tr>
<td><div align="left">neirong6</div></td>
</tr>
</tbody></table><br /><br/>

Answer 1

你的样式这么定义就是全局的了。给个样式名称。

<table class="mytable" >
    ....
</table>

    /*第一行标题蓝色背景*/
    .mytable tr:first-child {
        background: #0066CC;
        color: #fff;
        font-weight: bold;
    } 
    .mytable {
        border-top: 1pt solid #C1DAD7;
        border-left: 1pt solid #C1DAD7;
        margin: 0 auto;
    }
    .mytable td {
        padding: 5px 10px;
        text-align: center;
        border-right: 1pt solid #C1DAD7;
        border-bottom: 1pt solid #C1DAD7;
    }
    /* odd 标识奇数行，even标识偶数行 */
    .mytable tr:nth-of-type(odd) {
            background: #F5FAFA;
    }
    /*鼠标悬停后表格背景颜色*/
    .mytable tr:hover {
            background: #E0F0F0;
    }

追问

还得请教，第一行的背景是蓝色
.mytable tr:first-child {
background: #0066CC;
color: #fff;
font-weight: bold;
实际没有显示出效果，您帮我看下，需要怎样修改，谢谢。

Answer 2

你定义的css使用的元素选择器是标签，要单独定义class, 然后在html中制定给相应的表。
比如
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

参考：
http://www.w3school.com.cn/css/css_syntax_class_selector.asp

Answer 3

给第一个table加一个class，例如class=“table”，然后样式都写在.table下就好了

Answer 4

.style1 tr:first-child {.......}
.style1 {......}
.style1 td{......}
.style1 tr:nth-of-type(odd){ ......}
.style1 tr:hover{......}

<table class='style1'>

Answer 5

表格的样式放在需要的里面，你全局的，肯定2个都有。