Question

是否可以在不使用＆lt; style＆gt;的情况下从父级样式中设置子节点的样式＆lt; head＆gt;中的元素？

E.g。我有一个表格，我有一行（下面的第一行），我希望TD元素中的所有文本都是7pt的字体大小。

类似的东西：

  <table>
    <tr style='font-size:7pt;'>  <--- How do I tell it to apply to child TD elements
      <td>cell 1 should be formatted to 7pt font</td>
      <td>cell 2 should be formatted to 7pt font</td>
    </tr>
    <tr>
      <td>cell without format</td>
      <td>another cell without format</td>
    </tr>
  </table>

谢谢，格兰特

Answer 1

<table>
<tr class="format">
  <td>cell 1 should be formatted to 7pt font</td>
  <td>cell 2 should be formatted to 7pt font</td>
</tr>
<tr>
  <td>cell without format</td>
  <td>another cell without format</td>
</tr>

<style>.format>td{font-size:7pt;}</style>

Answer 2

您可以通过声明scoped样式来完成此操作：

  <table>
    <tr>
    <style scoped>  <--- "scoped" tells the browser to apply the styles inside the tr
        {your-selector}{             
            {styles}
        }
    </style>
      <td>cell 1 should be formatted to 7pt font</td>
      <td>cell 2 should be formatted to 7pt font</td>
    </tr>
    ...
  </table>

然而，浏览器支持这是一个可怕的atm。

阅读Article on Html5Doctor它真的很有趣，并且存在一个填充，您可以使用，直到浏览器支持它。

编辑：

最新的FF，Chrome和Opera似乎现在支持它：Article on HTML5Rocks

Answer 3

不可能直接。但如果您仍想使用内联样式，则需要使用JavaScript并为每个元素设置样式。再次，这不是一个好的解决方案

有效的方法是 - ＆gt;以下将适用于IE7和UP＆amp;所有其他浏览器

<style>
table tr:first-child > td {font-size:7pt;}
</style>

您可能想要为您的表提供类名。

Answer 4

您不能为子元素执行此操作。

style属性指定元素的内联样式。（source）

您可以使用jQuery执行您想要的操作：

<script>
$("tr:first-child td").attr("style", "font-size:7pt");
</script>

Answer 5

不，不是，这正是样式标签的用途:-)顺便说一下，尽量避免使用内联样式。

在style属性中为子节点设置CSS样式

5 个答案: