如何在页面/元素中的任何位置设置类的第一次出现的样式

Question

如何将样式text-decoration:line-through添加到表格中的第一个span class="price"元素？

我有以下HTML结构：

<table class="data-table" id="product-attribute-specs-table">
    <colgroup>
      <col width="25%">
      <col>
    </colgroup>
    <tbody>
      <tr class="first odd">
          <th class="label">Style Number</th>
          <td class="data last">2403</td>
      </tr>
      <tr class="even">
          <th class="label">Style Name</th>
          <td class="data last">Easy Option Berber</td>
      </tr>
      <tr class="odd">
          <th class="label">Rating</th>
          <td class="data last">3.5</td>
      </tr>
      <tr class="even">
          <th class="label">Retail Price</th>
          <td class="data last"><span class="price">$2.23</span></td>
      </tr>
      <tr class="odd">
          <th class="label">Price</th>
          <td class="data last"><span class="price">$1.44</span></td>
      </tr>
      <tr class="even">
          <th class="label">Roll Price Begins At</th>
          <td class="data last">125</td>
      </tr>
      <tr class="odd">
          <th class="label">Face Weight</th>
          <td class="data last">50</td>
      </tr>
      ...
    </tbody>
</table>

注意：我已在此处查看了答案，但它们不适用，因为我的课程不在同一个父元素中： CSS selector for first element with class

示例（没有工作）：

#product-attribute-specs-table tbody > tr td.data .price {text-decoration:line-through}
#product-attribute-specs-table tbody > tr td.data .price ~ tr td.data .price {text-decoration:none}

我还应该注意，页面中多次使用class="price"。我只需要将目标中的第一个作为目标。