可替代跨度

Question

基本上，我有一些讨厌的标记：

<td colspan="2">
  <strong class="ajax_cart_quantity">8</strong>
    items
  <strong class="ajax_cart_total">
    271,60 $
  <span class="price-2"> (210,66 €)</span>
  </strong>
</td>

我格式化了代码，这样就更容易阅读了。这是我的问题:我需要给.price-2一些样式(较小的字体)。

我不能做的是:使用类或属性，因为总值是通过ajax更新和刷新的，并将class属性交给span.price-2分解json。

我能做的是:在没有类和属性的情况下，用一些独特的元素包装第二个价格。

在核心css中已经有一些选择，目标是第二价格的table span。因此，基本上我需要想出一些其他内联元素行span，这样我就可以为price 2创建自己的样式选择器。

我也需要一些与旧浏览器兼容的东西。谢谢

Answer 1

就我个人而言，我会使用<em>或<small>。它们既是有效的，又是完全支持的，而且它们还传授了一些可能有用的自己的风格。

但是您不需要替换事件--只需在CSS中使用不带类的span，并将其作为不同的目标：

.ajax_cart_total span {font-size:0.8em;}

Answer 2

在CSS中添加一个特定的选择器时，保留html：

table td strong span.price-2 {
    font-size: 0.8em !important;
}

只有当选择器( !important )不够具体时才添加!important。

即使在古代的浏览器中也是如此。

Answer 3

如果您只需要另一个内联元素(仍然工作)，则可以使用<b>或<i> --这些内联工作仍然支持:)

(<b>用于粗体，<i>用于斜体，但在HTML中，这些文本效果是用<strong>和<em>实现的)。<b>和<i>仍然存在，尽管在实现上述文本强调方面使用的频率要低得多。它们将被内联地解释。)