将某些内联css转换为单独的表单

Question

<table border="1" style="background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;">
<tr style="background-color:orange;color:white;">
<th style="padding:3px;">Table header</th><th style="padding:3px;">Table header</th>
</tr>
<tr>
<td style="padding:3px;">Table cell 1</td><td style="padding:3px;">Table cell 2</td>
</tr>
<tr>
<td style="padding:3px;">Table cell 3</td><td style="padding:3px;">Table cell 4</td>
</tr>
</table>

我的问题是如何将此html示例中的内联CSS转换为外部样式表？

css会是这样的吗？

tr {background-color:orange;color:white;}
table {background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;}
td, th {padding:3px;}

Answer 1

使用table tr:first-child代替tr，因为只有第一行具有内联样式：

table {
background-color: yellow;
border: 1px dotted black;
border-collapse: collapse;
width: 80%;
}

table th, table td { 
padding: 3px;
}

table tr:first-child {
background-color: orange;
color: white;
}

http://jsfiddle.net/URBMh/2/