引号

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，则使用的引号取决于语言。

语法

css
/* Keyword value */
quotes: none;
quotes: auto;

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

/* Global values */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: revert-layer;
quotes: unset;

值

none

content 属性的 open-quote 和 close-quote 值不生成任何引号，就像分别设置了 no-open-quote 和 no-close-quote 一样。

auto

与继承语言（即通过在父级或其他祖先上设置的 lang 属性）在印刷上合适的引号。

[<string> <string>]+

定义一个或多个开头和结尾引号值的配对。在每个配对中，每个配对中的第一个引号用作 open-quote 的值，而每个配对中的第二个引号用作 close-quote。

第一对表示引号的最外层。第二对（如果存在）表示第一个嵌套层。下一对用于双重嵌套层，依此类推。如果引号嵌套深度大于配对数，则 quotes 值中的最后一对将被重复。

使用哪一对引号取决于引号的深度或嵌套级别：在当前出现之前所有生成文本中 <q> 引号或 open-quote（或 no-open-quote）的出现次数，减去结尾引号的出现次数，无论是作为 </q>、close-quote 还是 no-close-quote。如果深度为 0，则使用第一对，如果深度为 1，则使用第二对，依此类推。

注意：CSS content 属性值 open-quote 会增加引号级别，而 no-close-quote 会减少引号级别，但不会插入引号。

正式定义

初始值取决于用户代理
适用于所有元素
继承是
计算值如指定
动画类型离散

正式语法

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

示例

默认引号和覆盖

此示例比较了语义 HTML <q> 元素提供的默认引号与我们使用 CSS quotes 属性定义的引号。

quotes 的默认值为 auto。在这个例子中，第一个列表项设置了 quotes: auto，因此它将获取为指定语言设置的默认引号；与未设置 quotes 属性相同。第二个列表项定义了要用于引号和嵌套引号的引号；这些引号将用于具有 specialQuotes 类的元素的后代，无论语言如何（例如，设置了任何 lang 属性值）。

HTML

html
<ul>
  <li>
    Default quotes:
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
  <li class="specialQuotes">
    Defined by <code>quotes</code> property :
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
  <ul></ul>
</ul>

CSS

css
li {
  quotes: auto;
}

.specialQuotes {
  quotes: "“" "”" "‘" "’";
}

结果

默认情况下，浏览器在使用 <q> 元素时提供特定于语言的引号。如果定义了 quotes 属性，则提供的值将覆盖浏览器默认值。请注意，quotes 属性是继承的。quotes 属性设置在具有 specialQuotes 类的 <li> 上，但引号应用于 <q> 元素。

请注意，每个开引号和闭引号都会根据嵌套深度替换为 quotes 值中的一个字符串。

自动引号

quotes 的默认值为 auto。此示例无需显式设置即可正常工作。

HTML

html
<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

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

结果

请注意，lang 属性放置在 <q> 的祖先上，而不是 <q> 本身。如果引号与周围文本的语言不同，则通常使用周围文本的语言的引号来引用文本，而不是引号本身的语言。

使用生成内容

在此示例中，我们没有使用 <q> 元素，而是将引号添加到 ::before 和 ::after 伪元素，分别位于具有特定类名的每个元素的内容之前和之后。

HTML

html
<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>

CSS

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

结果

文本作为引号和空引号

此示例演示了使用除引号以外的其他内容作为 <string> 值。开引号表示说话者，因为没有开引号，所以闭引号是空的。（不支持将 <string> 与枚举关键字混合以创建一个对）。我们将嵌套引号设置为 auto。这些嵌套引号将以语言规定为嵌套引号的正常方式结束。

HTML

html
<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>

CSS

css
[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;
}

结果

规范

规范
CSS 生成内容模块级别 3
# 引号

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅