Question

我有一个像网站一样的文字用户定义其原始网站的配置。现在，用户已将<td>的字体设置为comic sans ms。并且在呈现网站时它完美地运行。但是，其中一个<td>元素中也有一个按钮。这不尊重<td>字体。由于它是一个基于动态（配置）的网站。我不具备很多灵活性。

FIDDLE SAMPLE

我在google上找到了一个解决方案，它说我应该在按钮元素中添加font-family: inherit。是否有任何方法强制将字体级联到所有子元素，无论它是什么，以便我不需要更改button element中的任何内容或一些最小的更改。

<table border=1>
<tr><td> test 1 </td></tr>
<tr><td> test 2 </td></tr>
<tr><td> test 3 </td></tr>
<tr><td> test 4 </td></tr>
<tr> <td><input type="button" style="width:130px;" value="Reserve"> </td></tr>
</table>


TD{font-family: Comic Sans MS; font-size: 10pt;}

Answer 1

以下内容应该完成工作。

TD,
TD *
{
  font-family: 'Comic Sans MS'; 
  font-size: 10pt;
}

根据您的第三个问题更新。我猜你正在修改第三方应用程序的风格，你不能改变HTML的能力？以下是开始有点hacky，但工作。

第一个定义将样式应用于表格单元格和单元格的所有子元素，除了具有按钮类型的那些元素。第二个定义仅将样式应用于具有按钮类型的表格单元格的子元素。

TD,
TD *:not([type=button])
{
    color: rgba(255, 0, 0, 0.9); /* example purposes */
    font-family: 'Comic Sans MS'; 
    font-size: 10pt;
}

TD input[type=button]
{
    font-family: 'Comic Sans MS';
}

Answer 2

定位按钮是否特别适合您的系统？或者只是针对td内的所有内容

TD * {font-family: Comic Sans MS; font-size: 10pt;}

Answer 3

input, select, textarea, button {
    font-family: inherit;
}

为了确保以这种方式定位所有表单元素： - ）

小提琴：https://jsfiddle.net/mLoqLv0h/1

如何强制将font-family级联到标记

3 个答案: