CSS 选择器只选择第一行

Question

我正在解析一个 html 页面并且有一个很长的 CSS 选择器（我想不出一个更短的选择器，因为这个页面很愚蠢）。它应该 select table 中的所有 tr，但只有 select 第二行...我错过了什么？

select或：

body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(8) > td:nth-child(1) > table:nth-child(4) > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) tr:not(:first-child)

该页面在彼此内部有多个 table，但前 90% 甚至无关紧要，在 selecting 我想使用的 table 之后，我跟随加上“[space]tr:not(...)”，所以它应该 select 所有降行，不是吗？

示例 html 页面（无法 link，您需要登录才能访问）：http://pastebin.com/gprXTvzz

在 select 或成功 select 我想要的 table 之后（在 select 或 ...> tbody:nth-child(1) tr:not(:first-child) ），年龄看起来像这样：

<tbody>
   <tr valign="bottom">
      <td class="blackmedium" width="80"><b>Part Number</b></td>
      <td class="blackmedium" width="100"><b>Manufacturer</b></td>
      <td class="blackmedium" width="40"><b>Abbr.</b></td>
      <td class="blackmedium" width="50"><b>WIX Part Number</b></td>
      <td class="blackmedium" width="50"><b>Lead Time</b></td>
   </tr>
   <tr>
      <td class="blackmedium" width="80">A0002701098</td>
      <td class="blackmedium" width="100">MERCEDES-BENZ</td>
      <td class="blackmedium" width="40">MBZ</td>
      <td class="blackmedium" width="50"> <a href="http://www.wixindustrialfilters.com/cross.aspx?Part=W03AT780" target="_blank">W03AT780</a>
      </td>
      <td class="blackmedium" width="50">
         STOCK
      </td>
   </tr>
   <tr bgcolor="#e0e0e0">
      <td class="blackmedium" width="80">A0002701598 Discontinued</td>
      <td class="blackmedium" width="100">MERCEDES-BENZ</td>
      <td class="blackmedium" width="40">MBZ</td>
      <td class="blackmedium" width="50"> <a href="javascript:var w=window.open('PartDetail.asp?Part=58892','PartDetail','left=200,top=200,width=530,height=500,toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,scrollbars=yes');w.focus();">58892</a>
      </td>
      <td class="blackmedium" width="50">
      </td>
   </tr>
   <tr>
      <td class="blackmedium" width="80">A0002772395</td>
      <td class="blackmedium" width="100">MERCEDES-BENZ</td>
      <td class="blackmedium" width="40">MBZ</td>
      <td class="blackmedium" width="50"> <a href="javascript:var w=window.open('PartDetail.asp?Part=51249','PartDetail','left=200,top=200,width=530,height=500,toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,scrollbars=yes');w.focus();">51249</a>
      </td>
      <td class="blackmedium" width="50">
      </td>
   </tr>
   <tr bgcolor="#e0e0e0">
      <td class="blackmedium" width="80">A0002772895</td>
      <td class="blackmedium" width="100">MERCEDES-BENZ</td>
      <td class="blackmedium" width="40">MBZ</td>
      <td class="blackmedium" width="50"> <a href="javascript:var w=window.open('PartDetail.asp?Part=57701','PartDetail','left=200,top=200,width=530,height=500,toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,scrollbars=yes');w.focus();">57701</a>
      </td>
      <td class="blackmedium" width="50">
      </td>
   </tr>
</tbody>

Answer 1

body > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(8) > td:nth-child(1) > table:nth-child(4) > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) tr:not(:first-child)

没有完全回答你的问题，但如果标记不是 parsing-friendly 并且我需要找到一个深深嵌套在可怕的标记 table 元素中，我更喜欢通过 其中存在特定 header。在这种情况下，您可以找到具有 Part Number header 的 table。示例 XPath：

//table[tr[1]/td/b = "Part Number"]

然后，在这个 table 上你可以使用 "not first child" CSS 选择器：

tr:not(:first-child)

或者，您也可以使用 adjacent selector（在 tr 元素之后查找 tr 元素，这在逻辑上会排除第一行）：

tr + tr

希望这会简化事情。

CSS 选择器只选择第一行

CSS Selector only selects the first row

html

css-selectors

html-parsing