如何使表的第一行的背景與表中的顏色不同？

Question

我有一張桌子，我想讓第一行的不同背景顏色爲藍色。我使用table tr：first-child，但它不起作用。你可以幫我嗎？謝謝。

<table> 
 
    <tr><td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr><td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
    <tr><td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    </tr> 
 
</table>

Answer 1

您可以使用此片段。

table tr:first-child td { 
 
    background: blue; 
 
}

<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
    <tr> 
 
    <td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    </tr> 
 
</table>

希望這有助於:)

Answer 2

您可以使用tr:first-of-type。檢查下面更新的代碼片段。

table tr:first-of-type td { 
 
    background: blue; 
 
}

<table> 
 
    <tr><td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr><td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
    <tr><td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    </tr> 
 
</table>

Answer 3

您可以使用此：

​​

，或者你可以添加類的第一tr

.bg-blue { 
    background:blue; 
} 

<table> 
    <tr class="bg-blue"> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
</table> 

Answer 4

至於你說的first-child不工作，我建議你檢查它的父親如果它有任何財產凌駕於你的房產之上。基本上，它應該以這種方式工作。另外，我想知道哪些瀏覽器實際上你看到的問題。 試試這個：

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

<table> 
 
    <tr><td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr><td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 
    <tr><td>7</td> 
 
    <td>8</td> 
 
    <td>9</td> 
 
    </tr> 
 
</table>

您可以與您的問題添加評論，如果它仍然未與解決方案解決。