javascript - 如何选择没有 ID 的样式表？

Question

我正在帮助在 Volusion 中设计一个网站，并尝试设计一个没有跨度 ID 的表格。由于该表是从 Volusion 自动生成的，因此无法添加 span id。我进入 CSS 并尝试了一切都无济于事。这是当前代码的一小段:

<table border="0" cellspacing="1" cellpadding="3" bgcolor="#CCCCCC">
<tr class="colors_backgroundlight">
<td>Item#</td>
<td>Item Name</td>
<td><span class="PageText_L335n"><b>Starting at</b></span></td>
<td><span class="PageText_L71n">Qty</span></td>
<td><b><span class="PageText_L337n">Add</span></b></td>
</tr>
<tr bgcolor="#FFFFFF" class="Multi-Child_Background">
<td class="smalltext colors_text">NFBM665-S</td>
<td class="productnamecolorSMALL colors_productname">Foil Thermal Bubble Mailer, 6" x 6.5" Sample</td>

不幸的是，页面上还有其他表格，所以我不知道该怎么做。有没有我可以使用的任何类型的 Javascript 代码只能针对这个特定的表？感谢您的帮助。

Answer 1

在 JavaScript 中隔离表格会遇到与在 CSS 中隔离表格相同的问题。

除了 id 之外，CSS 样式还可以基于多种东西应用。表格在 DOM 中的相对位置(如果它是静态的)将是我的下一个选择。

根据您场景中的 DOM，您有一个 span 元素，它是您所追求的 table 的兄弟元素。 span 的 id 为 product_description，这使得它在文档中是唯一的。以下将把表格作为 span 之后的兄弟元素:

#product_description ~ table { background:yellow; }

#product_description ~ table td { padding:25px; }

<span id="product_description" itemprop="description">
Please Note: For Thermal Bubble Mailer samples, we charge $5.95 for shipping and handling for each sample.<br />
1 sample per item, per customer. Coupon codes cannot be applied to samples.<br /><hr />
</span>
<br /><br />
<div style='height: 15px;'></div>
<div style='clear: both;'></div>

<table border="0" cellspacing="1" cellpadding="3" bgcolor="#CCCCCC">
  <tr class="colors_backgroundlight">
    <td>Item#</td>
    <td>Item Name</td>
    <td><span class="PageText_L335n"><b>Starting at</b></span></td>
    <td><span class="PageText_L71n">Qty</span></td>
    <td><b><span class="PageText_L337n">Add</span></b></td>
  </tr>
  <tr bgcolor="#FFFFFF" class="Multi-Child_Background">
    <td class="smalltext colors_text">NFBM665-S</td>
    <td class="productnamecolorSMALL colors_productname">Foil Thermal Bubble Mailer, 6" x 6.5" Sample</td>
  </tr>
</table>