quotes

Baseline Widely available

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

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

尝试一下

quotes: none;

quotes: initial;

quotes: "'" "'";

quotes: "„" "“" "‚" "‘";

quotes: "«" "»" "‹" "›";

<section id="default-example">
  <q id="example-element"
    >Show us the wonder-working <q>Brothers,</q> let them come out publicly—and
    we will believe in them!</q
  >
</section>

q {
  font-size: 1.2rem;
}

语法

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
动画类型	离散值

浏览器兼容性

参见

content