在html css中创建并使用TD

egdjgwm8  于 2024-01-09  发布在  其他
关注(0)|答案(5)|浏览(163)

我在<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>

字符串

l7mqbcuq

l7mqbcuq1#

  • 编辑:为了更好地解释问题和不同场景的解决方案,请参阅下面Jukka的回答。

原始答案:
在CSS选择器中,最接近实际元素的选择器被应用。所以在使用选择器覆盖样式时,你应该更具体。
在你的例子中,span元素有一个内联样式,这是最高的特异性。
要获得比外部元素中的内联样式更高的特异性,您应该使用 [style]important
你可以像这样在td上强制设置一个:

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

字符串
这里是工作JSFiddle

h9vpoimq

h9vpoimq2#

添加以下CSS。

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

字符串

tmb3ates

tmb3ates3#

这基本上与伊克巴尔的答案相同,但对问题的解释(和正确的解释,与目前接受的答案相反):
当您需要覆盖style属性中的CSS设置时,并且当您无法修改HTML源代码时,您需要编写一个CSS规则,a)引用您希望样式化的特定元素(不是其父代)* 和 * B)使用!important说明符(这通常应该避免,但在这里无法避免)。原因是在CSS级联中,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字体大小(这是您不应该设置的,但我离题了)。

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


(with浏览器覆盖率略有下降)。
当然,您可以将这些CSS规则放在style元素中,或者更好地放在从HTML文档链接的外部样式表中。这些都不需要对td元素中的HTML标记进行任何更改。

vojdkbi0

vojdkbi04#

为span使用一个单独的类。
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>

idv4meu8

idv4meu85#

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

字符串
<j/s>stable=t,tr=track,td=meclass=object,span= expansion,heart.is.everything.=bodyaction=call,get,return,function=press,push,switch= objectivemotion,/0 x -1= -1 - 1= -2 x 5 -10 - -1= -11=[A1 [A11]=me] -176<j/s>

相关问题