CSS選擇除每個表的第一行之外的所有HTML元素

Question

當您擁有隨機HTML頁面時。 我真的不管內容是什么還是結構

我想要選擇除頁面上存在的每個表的第一行（TR）以外的所有元素。

以下選擇器不起作用：

* :not(tr:first-child){ /* DO SOMETHING */}

呈現的表只是一個普通表，沒有任何表頭，例如：

<p>123</p>
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
</table>
<div>bla bla</div>

Answer 1

如何解決：

 * { color: green; } table tr:first-of-type td { color: red; } 

 <p>test</p> <ul> <li>item</li> <li>item</li> </ul> <table> <tr> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> </tr> </table> <p>test</p> <ul> <li>item</li> <li>item</li> </ul> <table> <tr> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> </tr> </table> 

Answer 2

您可能要樣式化表的內容，而不是“標題”。

一種簡單的方法是將td用作內容，將th用作標題，因為th用來定義HTML表中的標題單元格。 （你甚至可以記得它說個 = T能夠^ h EADER。）

然后，您只需定位td ：

 table { border-collapse: collapse; } /* Add your style here */ td { border: 1px solid gray; padding: 8px 20px; background: #ddd; } 

 <p>123</p> <table> <tr> <th>1</th><th>2</th><th>3</th><!-- Note the ths here! --> </tr> <tr> <td>a</td><td>b</td><td>c</td> </tr> <tr> <td>d</td><td>f</td><td>g</td> </tr> </table> <div>bla bla</div> 

---

⋅⋅⋅

如果您無法使用th小號...
由於您可能已經在td上應用了一些樣式，因此最好使用這種選擇器來匹配tr s中除第一個以外的td ：

 table { border-collapse: collapse; } td { border: 1px solid gray; padding: 8px 20px; } /* Stylize all tds in trs except in the first one! */ table tr:not(:first-child) td { background: #ddd; } 

 <p>123</p> <table><!-- All the elements are tds in the trs! --> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>a</td><td>b</td><td>c</td> </tr> <tr> <td>d</td><td>f</td><td>g</td> </tr> </table> <div>bla bla</div> 

希望能幫助到你。