html - 将某些内联 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/