如何为打印媒体CSS内容设置样式？PDF页脚样式优化咨询

要实现你需要的页脚样式优化，直接在@bottom-left的content字符串中单独设置部分文本样式比较受限，推荐两种可行方案：

方案一：使用隐藏DOM元素（推荐，兼容性更好） #

这种方法通过在HTML中添加一个隐藏的页脚容器，给需要样式的文本单独设置类，再通过CSS的element()函数将其引入页脚区域，能灵活控制各部分样式。

1. 添加HTML隐藏元素 #

在页面body末尾插入以下代码：

<div class="print-footer" style="display: none;">
    <p class="blue-heading">This should be blue</p>
    <p><span class="bold-label">Contact:</span> whatever</p>
    <p><span class="bold-label">President:</span> Something something, Something Something,</p>
    <p><span class="bold-label">Address:</span> Some very long address</p>
    <p><span class="bold-label">Bank:</span> The banking details</p>
</div>

2. 修改CSS代码 #

更新打印媒体查询样式：

@media print {
    /* 页脚元素基础样式 */
    .print-footer {
        font-size: 9px;
        line-height: 1.4;
    }
    /* 蓝色文本样式 */
    .blue-heading {
        color: #0066cc;
        margin: 0 0 8px 0;
    }
    /* 粗体标签样式 */
    .bold-label {
        font-weight: 700;
    }

    @page {
        @bottom-left {
            /* 引用隐藏的页脚元素 */
            content: element(print-footer);
        }
        @bottom-right {
            content: counter(page) "/" counter(pages);
            font-size: 9px;
        }
    }
}

方案二：使用多个伪元素（无需修改HTML） #

如果不想添加额外HTML元素，可以利用::before和::after伪元素拆分内容，但仅能实现部分需求：

@media print {
    @page {
        @bottom-left {
            font-size: 9px;
            white-space: pre;
        }
        /* 第一行蓝色文本 */
        @bottom-left::before {
            content: "This should be blue\00000a";
            color: blue;
            display: block;
        }
        /* 剩余内容（注：此方式无法单独给冒号前的文本加粗，只能给整行设置粗体） */
        @bottom-left::after {
            content: "\00000aContact: whatever\00000aPresident: Something something, Something Something, \00000aAddress: Some very long address\00000aBank: The banking details";
            /* 若要整行粗体，可添加 font-weight: 700; */
        }
    }
}

总结：方案一能完美实现你的需求，样式控制更灵活，是优先推荐的方案。

内容的提问来源于stack exchange，提问作者blueFast