覆盖 html css 中的 span 并使用 TD

Question

我在<td> 中有一个 span 标签。在<td> 中，我使用类来设置字体。但是，span 有自己的字体样式。我想覆盖 span 标签中的字体样式并强制标签中设置的字体。我不知道该怎么做，所以请指教。

.set_font
{
    font-size:12px;
}
<table>
    <tr>
        <td class="set_font">
           <span style:"font-size:8px;"> This is a test </span>
        </td>
    </tr>
</table>

Answer 1

编辑：有关不同场景的问题和解决方案的更好解释，请参阅下面 Jukka 的答案。

原答案：

在 CSS 选择器中，应用最接近实际元素的选择器。所以在使用选择器覆盖样式时应该更加具体。

在您的示例中，span 元素具有最高特异性的内联样式。

要在外部元素中获得比内联样式更高的特异性，您应该使用 [style] 和 important。
您可以像这样在 td 上强制设置一组：

td.set_font [style] {font-size:120px !important;}

这里正在工作JSFiddle

Answer 2

添加以下 CSS。

.set_font span {
    font-size: 12px !important;
}

Answer 3

这与 Iqbal 的答案基本相同，但对问题进行了解释（以及正确的解释，与当前接受的答案相反）：

当您需要覆盖 style 属性中的 CSS 设置，并且当您无法修改 HTML 源代码时，您需要编写一个 CSS 规则，该规则 a) 引用您希望设置样式的特定元素（而不是其父元素） and b) 使用!important 说明符（通常应避免使用，但此处无法避免）。原因是在 CSS cascade 中，style 属性中的任何 CSS 声明都比 style 元素中的 CSS 规则或链接样式表中的任何 CSS 声明具有更高的特异性。因此，覆盖此类规则的唯一方法是使用!important。

此外，您需要一个适用于手头元素的规则。尝试在 div 父级上设置属性可能无济于事，因为 span 在任何样式表中设置属性时都不会从其父级继承属性。

因此，例如，

 .set_font span { font-size: 12px !important }

将在span 元素上强制（在作者样式表可以强制任何内容的范围内）12px 字体大小。如果span 元素有时可能会被其他元素替换，您可以使用

 .set_font * { font-size: 12px !important }

使单元格的 any 后代采用 12px 字体大小（这是您不应该设置的，但我离题了）。要使任何 child（直系后代）都具有该大小，您可以使用

 .set_font > * { font-size: 12px !important }

（浏览器覆盖率略有降低）。

当然，您可以将此类 CSS 规则放在 style 元素中，或者更好的是，放在从 HTML 文档链接的外部样式表中。这些都不需要对td 元素中的 HTML 标记进行任何更改。

Answer 4

为跨度使用单独的类。

css:

.set_font
     {
        font-size:12px;
}

.font2{
    font-size:8px;
}

html:

<table>
 <tr>
 <td class="set_font">
   <span class="font2"> This is a test </span>
 </td>
 </tr>
 </table>