在css中通过 quotes 属性自定义嵌套引用的引号符号，需要为元素设置该属性并指定一个包含成对引号的字符串列表。浏览器会根据引用嵌套的层级，自动从列表中选取对应的引号插入到 ::before 和 ::after 伪元素中。若未定义该属性或列表为空，则回退到默认的双引号和单引号。
如何配置 quotes 属性以支持多级嵌套
要支持多级嵌套引用，必须在 quotes 属性中提供足够数量的引号对。属性的值是一个空格分隔的字符串列表，每两个字符串组成一对（外层、内层）。例如，若要实现“双引号”套“单引号”再套“书名号”的效果，需按顺序列出这三对符号。当嵌套层级超过提供的引号对数量时，浏览器会重复使用最后一对引号。
/* HTML结构 */
<blockquote class="quote">
<p>第一层引用</p>
<blockquote class="quote">
<p>第二层引用</p>
<blockquote class="quote">
<p>第三层引用</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2905" title="CSS"><img
src="https://img.php.cn/upload/manual/000/969/633/6af2b1226ad9e733.png" alt="CSS" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2905" title="CSS" class="overflowclass">CSS</a>
<p class="overflowclass">CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2905" title="CSS" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</blockquote>
</blockquote>
</blockquote>
/* CSS样式 */
.quote {
quotes: "\" \"" "\' \'" "《》";
}
.quote::before {
content: open-quote;
}
.quote::after {
content: close-quote;
}
上述代码定义了三层嵌套的引号规则。第一层使用双引号（"），第二层使用单引号（'），第三层使用中文书名号（《 和 》）。如果存在第四层，它将再次使用书名号。运行此代码后，观察DOM中的文本内容，会发现实际的引号字符并未直接出现在HTML源码中，而是由浏览器渲染引擎根据 open-quote 和 close-quote 关键字动态生成的。
如何处理 quotes 属性与默认行为的冲突
当 quotes 属性未设置或设置为空字符串时，浏览器会使用用户代理样式表中的默认值，通常是 quotes: "\201C" "\201D" "\2018" "\2019";，即双角引号和单角引号。这种默认行为在不同语言环境下可能不符合预期。通过显式设置 quotes 属性，可以完全覆盖默认行为。需要注意的是，如果只提供了奇数个引号字符串，最后一个引号将被忽略，因为它无法构成一对。此外，quotes 属性仅影响 content 属性中使用 open-quote 和 close-quote 的情况，对普通文本中的引号无影响。
/* 测试默认行为与自定义行为的对比 */
.default-quote {
/* 不设置 quotes 属性，使用默认值 */
}
.custom-quote {
quotes: "『』" "「」";
}
.default-quote::before, .custom-quote::before {
content: open-quote;
}
.default-quote::after, .custom-quote::after {
content: close-quote;
}
通过对比这两段代码，可以看到 .default-quote 类将使用浏览器默认的引号，而 .custom-quote 类将使用指定的日式引号。在实际开发中，应根据目标用户的阅读习惯选择合适的引号样式。如果希望禁用自动引号，可以将 quotes 设置为空字符串 quotes: '';，这样 open-quote 和 close-quote 将不会插入任何内容。
基于 quotes 属性中引号对数量不足时的具体表现
当嵌套层级超过 quotes 属性中定义的引号对数量时，浏览器会重复使用最后一对引号。例如，如果只定义了两对引号，但嵌套了四层，那么第三层和第四层都将使用第二对引号。这种行为确保了无论嵌套多深，都能有引号显示，避免了因缺少引号导致的格式错误。开发者在设计嵌套引用样式时，应考虑到可能的最大嵌套深度，并提供足够的引号对，或者接受最后一对引号的重复使用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
