10+ 代码案例快速掌握 CSS quotes 属性

2025年5月19日 08:50

CSS 的 quotes 属性用于设置浏览器应如何渲染引号，这些引号会自动添加到 HTML 的 <q> 标签中，或通过 CSS content 属性的 open-quotes、close-quotes 值（或使用 no-open-quote、no-close-quote 值省略）添加。

浏览器会在 <q> 标签的开头和结尾插入引号，并为 content 属性的 open-quote 和 close-quote 值添加引号。每一对开始或结束引号都会根据嵌套深度，从 quotes 属性的值中选择对应的字符串进行替换；如果 quotes 显式设置为 auto 或最终解析为 auto ，则使用的引号取决于语言设置。

将 open-quote 和 close-quote 设置为使用法语引号格式：

quotes: "«" "»";

设置两级引号样式：

quotes: "«" "»" "‹" "›";
/* 
第一级：« »
第二级：‹ ›
*/

`none`

当 quotes 属性的值为 none 时表示不添加引号。

即，不会为 <q> 标签添加引号。content 属性值为 open-quote 或 close-quote 时，也不会添加引号，就像是 content 属性值为 no-open-quote 或 no-close-quote 时一样。

<style>
  .test {
    quotes: none;
  }
</style>

<div class="test">
  <q>你是人间四月天</q>
</div>

没有生成引号：

<style>
  .test {
    quotes: none;
  }

  .quotes::before {
    content: open-quote;
  }
  .quotes::after {
    content: close-quote;
  }
</style>

<div class="test">
  <span class="quotes">你是人间四月天</span>
</div>

没有生成引号：

`[<string> <string>]+`

quotes 属性的值类型：[<string> <string>]+

定义一组或多组用于开头引号和结尾引号的标记值。每组包含两个值：第一个值作为 open-quote 的标记，第二个值作为 close-quote 的标记。

第一组代表最外层的引号样式。若存在第二组，则代表第一级嵌套引号样式。后续组别依次用于更深层级的嵌套引号。若引号嵌套深度超过定义的组数，则重复使用最后一组标记值。

具体使用哪组引号标记取决于当前引号的深度（即嵌套层级），若深度为 0，则使用第一对引号；若深度为 1，则使用第二对引号，依此类推。

<style>
.test {
  quotes: "«" "»" "[" "]";
}
</style>

<div class="test">
  <!-- 若引号嵌套深度超过定义的组数，则重复使用最后一组标记值 -->
  <q>
    太空研究
    <q>
    正在进入一个新阶段，随着
    <q>
        火箭的负载越来越大，以及发射成本的降低和发射频率的提高，我们现在可以把真正大型
    </q>
    的仪器发射到
    </q>
    太空。
  </q>
</div>

<!--
 具体使用哪组引号标记取决于当前引号的深度（即嵌套层级），
 若深度为 0，则使用第一对引号；若深度为 1，则使用第二对引号，依此类推 
-->
<style>
.test {
  quotes: "«" "»" "‹" "›" "[" "]";
}
</style>


<div class="test1">
  <q> <!-- 第 1 级 -->
    你
    <q> <!-- 第 2 级 -->
      是
      <q>人间</q> <!-- 第 3 级 -->
      四月
    </q>
    天
  </q>
</div>

`auto`

CSS 的 quotes 属性的默认值是 auto 。浏览器会根据元素继承的语言（即通过父元素或祖先元素设置的 lang 属性），自动选用符合该语言排版规范的引号样式。

<style>
  q {
    quotes: auto;
  }
  li:not(:last-of-type) {
    border-bottom: 1px solid;
  }
</style>

<ul>
  <!-- 法语的引号 -->
  <li lang="fr">
    <q>Ceci est une citation française.</q>
  </li>
  <!-- 俄语的引号 -->
  <li lang="ru">
    <q>Это русская цитата</q>
  </li>
  <!-- 德语的银行 -->
  <li lang="de">
    <q>Dies ist ein deutsches Zitat</q>
  </li>
  <!-- 英语的引号 -->
  <li lang="en">
    <q>This is an English quote.</q>
  </li>
</ul>

如果 CSS 的 quotes 属性设置的值是非法的，则浏览器会将quotes 属性回退到 auto 来处理

<style>
  .test {
    /* 没有成对，是非法的 quotes 属性值 */
    quotes: "«" "»" "[";
  }
</style>

<div class="test">
  <q>
    太空研究
    <q>
      正在进入一个新阶段，随着
      <q>
        火箭的负载越来越大，以及发射成本的降低和发射频率的提高，我们现在可以把真正大型
      </q>
      的仪器发射到
    </q>
    太空。
  </q>
</div>

对于非法的 quotes 属性值，最终浏览器回退到了默认值，即 auto

content 属性生成的内容

除了使用 <q> 标签添加引号外，也可通过为特定类名的元素内容前后添加 ::before 和 ::after 伪元素来实现引号的插入。

content 为 open-quote 时，内容替换为 quotes 属性中定义的开引号

content 为 close-quote 时，内容替换为 quotes 属性中定义的闭引号

<style>
  .quote {
    quotes: '"' '"' "'" "'";
  }
  .quote::before {
    content: open-quote;
  }
  .quote::after {
    content: close-quote;
  }
</style>

<p>
  <span class="quote">I should be using quotes</span>, I thought,
  <span class="quote">But why use semantic HTML elements when I can add classes to
    <span class="quote">ALL THE THINGS!</span>?
  </span>
</p>

与 open-quote 和 close-quote 值相对的，有 no-open-quote 和 no-close-quote 。

当 content 值为 no-open-quote 时，隐藏当前位置本应出现的开引号

当 content 值为 no-close-quote 时，隐藏当前位置本应出现的闭引号

<style>
  .quote {
    quotes: "《" "》" "〈" "〉";
  }
  .quote::before {
    content: open-quote;
  }
  .quote::after {
    content: close-quote;
  }
</style>

<div>
  正常引用
  <span class="quote">
    第一层<span class="quote">第二层</span>
  </span>
</div>

隐藏开引号的例子：

<style>
  .quote {
    quotes: "《" "》" "〈" "〉";
  }
  .quote::before {
    content: open-quote;
  }
  .quote::after {
    content: close-quote;
  }
  .quote.no-open::before {
    content: no-open-quote;
  }
</style>

<div>
  正常引用
  <span class="quote no-open">
    第一层<span class="quote">第二层</span>
  </span>
</div>

文本引号与空引号的使用

CSS 的 quotes 属性值也可以是非引号字符，比如使用 open-quote 标记说话者的身份，此时由于 open-quote 未设置为正常的开引号，因此，close-quote 通常会保持为空值。

<style>
  [data-speaker="karen" i] {
    quotes: "She said: " "";
  }
  [data-speaker="chad" i] {
    quotes: "He said: " "";
  }
  [data-speaker="pat" i] {
    quotes: "They said: " "";
  }
  [data-speaker] q {
    quotes: auto;
  }
</style>

<ul>
  <li><q data-speaker="karen">Hello</q></li>
  <li><q data-speaker="chad">Hi</q></li>
  <li><q data-speaker="karen">this conversation is not interesting</q></li>
  <li>
    <q data-speaker="pat"
      >OMG! <q>Hi</q>? Seriously? at least <q>hello</q> is five letters long.</q
    >
  </li>
</ul>

上面的例子也可以用 content 属性来代替 <q> 标签实现：

<style>
  [data-speaker="karen" i] {
    quotes: "She said: " "";
  }
  [data-speaker="karen" i]::before {
    content: open-quote;
  }
  [data-speaker="karen" i]::after {
    content: close-quote;
  }

  [data-speaker="chad" i] {
    quotes: "He said: " "";
  }
  [data-speaker="chad" i]::before {
    content: open-quote;
  }
  [data-speaker="chad" i]::after {
    content: close-quote;
  }

  [data-speaker="pat" i] {
    quotes: "They said: " "";
  }
  [data-speaker="pat" i]::before {
    content: open-quote;
  }
  [data-speaker="pat" i]::after {
    content: close-quote;
  }

  [data-speaker] span {
    quotes: auto;
  }
  .quotes::before {
    content: open-quote;
  }
  .quotes::after {
    content: close-quote;
  }
</style>

<ul>
  <li><div data-speaker="karen">Hello</div></li>
  <li><div data-speaker="chad">Hi</div></li>
  <li><div data-speaker="karen">this conversation is not interesting</div></li>
  <li>
    <div data-speaker="pat"
      >OMG! 
      <span class="quotes">Hi</span>? Seriously? at least 
      <span class="quotes">hello</span> is five letters long.
    </div>
  </li>
</ul>

总结

CSS 的 quotes 属性在日常的开发中比较少用。

quotes 属性用于设置浏览器应如何渲染引号，这些引号会自动添加到 HTML 的 <q> 标签中，或通过 CSS content 属性的 open-quotes、close-quotes 值添加。

CSS content 属性值设置为 no-open-quote 或 no-close-quote 省略引号。

参考

quotes

阅读视图

none

[<string> <string>]+

auto

content 属性生成的内容

文本引号与空引号的使用

总结

参考

`none`

`[<string> <string>]+`

`auto`