Question

我正在开发一个项目，我将html发送给PDF创建者，所以只要它在PDF上正确显示，我就不会太担心正确的HTML。

我目前正在处理一个PDF，其中大约一半的页面使用与另一个不同的字体。我希望通过在选择周围放置标签来轻松实现这一目标。但是，有些表和列表没有继承css样式。

例如：

CSS：

.fs8
{
    font-size:8pt;
}

HTML：

...
<p>Size 10 text here...</p>

<span class='fs8'>

<p>This text is size 8</p>

<table>
    <tr>
        <td>This text is NOT size 8</td>
    </tr>
</table>

<p>Still size 8...</p>

<ul>
    <li>NOT size 8!
</ul>

</span>

<p>Size 10 again...</p>

是否有跨越表和列表的好方法，所以我不必在数百个地方添加类标签？

Answer 1

不确定我是否得到了你的意思，但我知道你想要优化你的选择器。

试试这个：

.fs8 td,
.fs8 li
{
    font-size:9pt;
}

这会在类td的元素内的任何li或fs8标记中将font-size设置为9pt。

Answer 2

你应该使用div而不是span，因为span默认是一个内联元素，这意味着它不应该包含块级元素，例如table或ul。现在为CSS。

.fs8 {
  font-size: 8px;
}
.fs8 table,
.fs8 ul {
  font-size: 10px; /* not 8px */
}

这应该可以解决问题。除了包装 div 之外，你不需要为任何项添加类，记住它不能是一个span，所以用div替换它以获得正确的行为。

Answer 3

在span元素周围使用table标记只是无效的标记，因此所有投注均已关闭。请考虑使用div或直接将所需的CSS属性分配给适用的元素。

Answer 4

我知道你不想做类标签，但你不必把它放在所有类标签上。你可以在整个事物上放一个div，而不是外部设置可以覆盖的span标记。我之前遇到过这个问题，所以做这样的事情：

    <div id="my_settings">

     <table>.....
     </table>

     <ul>....
     </ul>


     </div>

然后在你的CSS中执行此操作：

     #my_settings li, #my_settings li, #my_settings p{
         font-siz: ....;
     }

我不完全确定这是否是你想要的，但它可能比向所有人添加一个类更容易。

Answer 5

由于您需要快速且可能很脏的解决方案，因此可以使用通配符选择器

.fs8, .fs8 *, .fs8 * *, .fs * * * { font-size:8pt; }

（表格需要全部3个（span＆gt; table＆gt; tr＆gt; td）

尽管如此，请注意可能存在不良副作用！

此外，您应该注意用于生成PDF的工具，有些使用旧的浏览器渲染引擎生成文件（hello ie6渲染）。事实上，这可能是你在ie8上遇到问题的原因，this example works perfectly，但不是奇怪的模式。

Answer 6

我不确定你的问题，但我会尽力回答：

p { font-size:10px; }
.fs8 p { font-size:8px; }

或

p, td, li { font-size: 10px; }
span.fs8 p { font-size:8px; }

表格，列表</span>周围的html <span>标签

6 个答案: