9

是否可以在不使用 <head> 中的 <style> 元素的情况下从父样式中设置子节点的样式？

例如，我有一个表格，其中有一行（下面的第一行），并且我希望 TD 元素中的所有文本的字体大小为 7pt。

就像是：

  <表格>
    <tr style='font-size:7pt;'> <--- 我如何告诉它应用到子 TD 元素
      <td>单元格 1 应格式化为 7pt 字体</td>
      <td>单元格 2 应格式化为 7pt 字体</td>
    </tr>
    <tr>
      <td>无格式单元格</td>
      <td>另一个没有格式的单元格</td>
    </tr>
  </table>

谢谢，格兰特

4

5 回答 5

3 
<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>
于 2012-07-05T14:39:05.067 回答
1

您可以通过声明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>

但是，浏览器对此的支持很糟糕。

阅读关于 Html5Doctor 的文章真的很有趣，并且有一个 polyfill，你可以使用直到浏览器支持它。

编辑：

最新的 FF，Chrome 和 Opera 现在似乎支持它：HTML5Rocks 上的文章

于 2012-07-05T14:47:32.320 回答
0

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

有效的方法是 --> 以下将在 IE7 和 UP 以及所有其他浏览器中工作

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

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

于 2012-07-05T14:42:10.467 回答
0

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

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

你可以使用 jQuery 做你想做的事：

<script>
$("tr:first-child td").attr("style", "font-size:7pt");
</script>
于 2012-07-05T14:43:12.650 回答
-2

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

于 2012-07-05T14:38:19.043 回答