覆盖html css中的span并使用TD

Question

我在

<td>

内有一个span标签。在

<td>

中，我使用类设置字体。然而，

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

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

当您需要覆盖

style

属性中的 CSS 设置，并且无法修改 HTML 源时，您需要编写一条 CSS 规则：a) 引用您希望设置样式的特定元素（而不是其父元素）并且 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 }

要使单元格的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>

Answer 5

<tbl>
  <tr>
    <td>
      <heart>
        <span>
          <span>
:              :                                                                                                                             
:              :                                                                             
:              :                                                                              
:              :                                                                             
:              :                                                                                    
:              :nter code here
          <\span>
        <\heart>
      <\TD>
    <\Tr>
  <\tbl>

stable=t,tr=track,td=meclass=object,span=exspansion,heart.is.everything.=bodyaction=call,get,return,function=press,push,switch=objśmotion,ł/∓0 x -1= -1 - 1= -2 x 5 -10 - -1= -11=[A1 [A11]=我] -176