quotes属性仅对::before和::after伪元素配合content生效，不能直接作用于表格元素；需通过伪元素显式插入open-quote/close-quote，并设置quotes值定义引号样式。
quotes属性在表格中根本不起作用
quotes 是 CSS 中用于控制 content: open-quote / close-quote 生成引号的属性，但它**只对伪元素 ::before 和 ::after 生效**，且仅当配合 content 使用时才触发。HTML 表格元素（如 <table>、<code><td>）本身不支持直接通过 <code>quotes 自动为内容加引号——哪怕你给 <td> 设置了 <code>quotes: "«" "»";，也不会有任何双引号出现。
想给表格单元格加自定义双引号？必须用 content + 伪元素
真正可行的做法是：显式使用 ::before 和 ::after 插入引号，并通过 quotes 控制其样式。关键点：
- 目标元素（如
<td class="quoted">）需设 <code>position: relative或其他可定位方式，避免伪元素错位 - 必须写
content: open-quote和content: close-quote，否则quotes完全无效 -
quotes值按“开引号 闭引号”成对定义，支持多层嵌套，但表格里通常只需一层
示例：
td.quoted {
quotes: "“" "”"; /* 中文弯引号 */
position: relative;
}
td.quoted::before {
content: open-quote;
margin-right: 0.1em;
}
td.quoted::after {
content: close-quote;
margin-left: 0.1em;
}
对应 HTML：<td class="quoted">这是一段引用文本</td> → 渲染为 “这是一段引用文本”
注意浏览器兼容性和引号编码问题
虽然现代浏览器都支持 quotes，但容易踩的坑有：
- 引号字符必须是合法 Unicode 字符，不能用 HTML 实体（如
"或“），否则解析失败，回退为默认英文引号 - 某些旧版 Safari 对多层
quotes嵌套支持不稳定，单层最稳妥 - 如果单元格内已有 HTML 标签（如
<strong></strong>），伪元素会包裹整个td内容，可能破坏结构——此时应改用 JS 动态插入或服务端渲染 -
content伪元素无法继承父级字体设置，若引号显示为方框，需显式指定font-family（例如包含中文的字体栈）
替代方案：JS 动态包裹更可控
当内容动态生成、需精确控制引号位置或兼容性要求极高时，CSS 伪元素反而容易出问题。这时直接用 JS 更可靠：
- 遍历目标
td，用textContent提取纯文本，再用innerHTML = '“' + text + '”'替换（注意 XSS 风险，纯文本场景可用） - 若保留原有 HTML 结构，可用
document.createElement包裹内容节点，再插入首尾文本节点 - Vue/React 等框架中，直接在模板里写
"“{{ item }}"”最直观，也避免 CSS 层级干扰
真正要加引号的地方，从来不是靠 quotes 属性自动生效，而是靠明确告诉浏览器“这里要插什么”——无论是用 content 还是字符串拼接，核心都是主动注入，不是被动修饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
