是HTML表格的第一行，帶有 <th> 標簽第0行？

Question

具有th標簽的HTML表格的第一行是否是第0行？ 因為如果我用

.t01 tr:nth-child(even) {
    color: red;
}

.t01 tr:nth-child(odd) {
    color: white;
}

第一行和第二行的文本顏色均為白色。 但是第二行應該是紅色的，因為2是偶數。

Answer 1

您可能需要在瀏覽器上重置瀏覽器數據。 尤其是如果您一直在使用CSS，這可能會導致頁面看上去不清晰。

Answer 2

是的，的確如此，HTML表的第一行從0開始。

例如 ：

//我們有一個包含3行的表

<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
  </tr>
</table>

我們正在檢索第0行

alert(document.getElementById("myTable").rows[0].innerHTML);

其輸出將是：

第1行單元格1

Answer 3

沒有您的代碼，很難提供幫助，它應該按原樣工作。

我的猜測是，您正在使用<thead>和<tbody> ，這導致2個容器包含<tr>標記。 所以<thead>的第n個子<thead>是奇數，而<tbody>的第n個子<tbody>也是奇數

 .container { display: flex; flex-direction: row; justify-content: space-around; } .container div { display: flex; flex-direction: column; justify-content: center; align-items: center; } .container p { font-size: 8pt; } .t01 { background-color: #3d3d3d; } .t01 tr:nth-child(even) { color: red; } .t01 tr:nth-child(odd) { color: white; } .t02 { background-color: #3d3d3d; } .t02 tr:nth-child(even) { color: red; } .t02 tr:nth-child(odd) { color: white; } .t03 { background-color: #3d3d3d; } .t03 thead tr:first-child { color: red; } .t03 tbody tr:nth-child(even) { color: red; } .t03 tbody tr:nth-child(odd) { color: white; } 

 <div class="container"> <div> <table class="t01"> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> <tr> <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> <p>No &lt;thead&gt; &amp; &lt;tbody&gt;</p> </div> <div> <table class="t02"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> </thead> <tbody> <tr> <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> </tbody> </table> <p>With &lt;thead&gt; &amp; &lt;tbody&gt;</p> </div> <div> <table class="t03"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> </thead> <tbody> <tr> <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> </tbody> </table> <p>Fix for &lt;thead&gt; &amp; &lt;tbody&gt;</p> </div> </div>