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

添加以下CSS。

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

Answer 2

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

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

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

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

这是有效的JSFiddle

Answer 3

这与伊克巴尔的答案基本相同，但是对问题的解释（以及正确的解释，与目前接受的答案相反）：

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

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

因此，例如，

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

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

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

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

 .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>

覆盖html css中的span并使用TD

4 个答案: