quotes

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

quotes CSS 属性用于设置引号的样式。

尝试一下

语法

css

/* Keyword value */
quotes: none;

/* <string> values */
quotes: "«" "»"; /* Set open-quote and close-quote to the French quotation marks */
quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */

/* Global values */
quotes: inherit;
quotes: initial;
quotes: unset;

值

none: content 属性的值 open-quote 和 close-quote 将不会展示引号。
auto: 用适当的引号，基于在所选元素上设置的任何语言值（例如，通过 lang 属性）。
[<string> <string>]+: 一组或者多组 <string> 的值对应 open-quote and close-quote. 第一对表示引号的外层，第二对表示第一个嵌套层，下一对表示第三层，依此类推。

形式语法

quotes = 
  auto                    |
  none                    |
  match-parent            |
  [ <string> <string> ]+

示例

基本用法

HTML

html

<q>To be or not to be. That's the question!</q>

CSS

css

q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

结果

自动选择引号

HTML

html

<div lang="fr">
  <q>Ceci est une citation française.</q>
  <div>
    <hr />
    <div lang="ru">
      <q>Это русская цитата</q>
      <div>
        <hr />
        <div lang="de">
          <q>Dies ist ein deutsches Zitat</q>
          <div>
            <hr />
            <div lang="en">
              <q>This is an English quote.</q>
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

css

/*q {
  quotes: auto;
}*/

结果

备注

对于大多数浏览器，引号的默认值始终为 auto（Firefox 70+），否则浏览器具有此默认行为（Chromiums，Safari，Edge），因此上面的示例可以在不显式设置的情况下工作。
从 Firefox 3.5 开始，可以使用 -moz-initial读取 quotes 属性的初始值，这在 Firefox 的早期版本中是不可能的。

规范

Specification
CSS Generated Content Module Level 3 # quotes

初始值	depends on user agent
适用元素	所有元素
是否是继承属性	是
计算值	as specified
动画类型	离散值

浏览器兼容性

BCD tables only load in the browser

参见

content