表格、列表周围的 html <span> 标签答案

【问题标题】：html <span> tags around tables, lists表格、列表周围的 html <span> 标签
【发布时间】：2012-10-17 19:22:29
【问题描述】：

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

我目前正在处理 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>

有什么好的方法可以跨表和列表，这样就不用在几百个地方添加类标签了吗？

【问题讨论】：

您应该使您的 html 代码尽可能干净和正确。它将有助于更好地理解格式问题。
我明白这一点，如果我正在制作一个实际的网页，我不会尝试做这些俗气的快捷方式。但我只是在寻找实现目标的最简单方法（无论是否“正确”html）

标签： css tags html

【解决方案1】：

不确定我是否明白你的意思，但据我了解，你想改进你的选择器。

试试这个：

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

这将在类fs8 的元素内的任何td 或li 标记中将字体大小设置为9pt。

【讨论】：

我知道我可以做到这一点，但这意味着我必须去为每个列表项和表格单元格添加数百个类标签......我希望有一种更简单的方法来完成这个.
在我原来的帖子中：我正在尝试找到最简单的方法，让我的 html 页面的一半与另一半不同（其中页面包含大量表格和列表）
您只需将 .sf8 添加到父表和 ul 标签，而不是 td 和 li 标签。你有多少个表和无序列表？
抱歉，我没有仔细看答案...这很完美，但我需要使用 DIV：.fs8, .fs8 table, .fs8 tr, .fs8 td , .fs8 ul, .fs8 li { font-size:8pt !important; }

【解决方案2】：

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

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

这应该可以解决问题。除了包装 div 之外，您不需要向任何项目添加类，请记住它不能是跨度，因此将其替换为 div 以获得正确的行为。

【讨论】：

这实际上很有帮助，也是一个很好的解决方案，谢谢！但是，我没有提到我有一个不同的 css 属性（包括表格、列表）用于覆盖 div 样式的 html 正文。
嗯，如果有未公开的需求，比如没有 div，解决这个问题不是很容易。您可以使用任何其他块级元素，例如 blockquote，但不能使用内联级元素，例如 span。
抱歉，当我尝试您的解决方案时，我相信我不小心仍在使用 span ... fs8 td, .fs8 ul, .fs8 li { font-size:8pt !important; } 谢谢！！
没问题。感谢您选择我的答案作为解决方案:)

【解决方案3】：

在table 元素周围使用span 标签是无效的标记，所以所有的赌注都被取消了。考虑改用 div 或直接将所需的 CSS 属性分配给适用的元素。

【讨论】：

我也尝试将选择放在
中，但它的工作方式似乎与标记没有任何不同
那么您正在使用 Quirks 模式，或者您有其他 CSS 设置覆盖了您尝试进行的设置。你没有提供足够的信息。可以确定的是span 不能有效地包含table。
span 元素默认为display:inline，我会尽量避免将块元素放入其中。
如果用户代理在display: block 之外有任何div 的默认设置，这将是奇怪的（尽管在技术上是可能的），所以我很确定原因是完全不同的。考虑发布足够的事实。
用户代理样式表影响的是表格和列表，而不是 div...找到了解决方案，不过...谢谢！

【解决方案4】：

我知道你不想做类标签，但你不必把它放在所有标签上。您可以在整个事物周围放置一个 div，而不是可以被外部设置覆盖的 span 标签。我以前遇到过这个问题，所以请执行以下操作：

    <div id="my_settings">

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

     <ul>....
     </ul>


     </div>

然后在你的 css 中这样做：

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

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

【讨论】：

您有示例链接吗？

【解决方案5】：

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

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

（您需要所有 3 个表格（跨度 > 表格 > tr > td）

不过，请注意可能会有不良副作用！

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

【讨论】：

没关系，反正我自己会尽量避免的！

【解决方案6】：

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

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

或

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

【讨论】：