將內聯樣式表轉換為外部樣式表

Question

我在文件中關注了SyleSheet。

CSS

<table style="font-family:Comic Sans MS;margin-left:auto;margin-right:auto;">
        <tr>
            <td colspan="2" style="width:1000px;height:30px;background-color:Gray;">
            </td>
        </tr>
        <tr>
            <td style="width:200px;height:600px;background-color:Lime;">
            </td>
            <td style="width:800px;height:600px;background-color:Maroon;">
            </td>
        </tr>
        <tr>
            <td colspan="2" style="width:1000px;height:30px;background-color:Olive;">
            </td>
        </tr>
    </table>

我想要的是在上面的表格中制作一個獨立的樣式表，以便可以在其他表上應用該樣式表。總而言之，我想將內聯樣式表轉換為外部樣式表。

我試過了，但是由於有相同的td需要用不同的樣式來使我感到困惑。我知道我可以使用class屬性，但是如果還有其他可能的話請告訴我。

Answer 1

下面應該這樣做：

演示小提琴

table{
    font-family:Comic Sans MS;margin-left:auto;margin-right:auto;
}
tr:nth-child(1) td{
    width:1000px;height:30px;background-color:Gray;
}
tr:nth-child(2) td:first-child{
    width:200px;height:600px;background-color:Lime;
}
tr:nth-child(2) td:last-child{
    width:800px;height:600px;background-color:Maroon;
}
tr:nth-child(3) td{
    width:1000px;height:30px;background-color:Olive;
}

您可以使用nth-child ， 第一個孩子和最后一個孩子