quotes

quotes 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. 第一对表示引号的外层,第二对表示第一个嵌套层,下一对表示第三层,依此类推。

语法格式

none | auto | [ <string> <string> ]+

示例

基本用法

HTML

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

CSS

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

结果

自动选择引号

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>

CSS

/*q {
  quotes: auto;
}*/

结果

备注

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

规范

Specification Status Comment
CSS Generated Content Module Level 3
quotes
Working Draft
CSS Level 2 (Revision 1)
quotes
Recommendation Initial definition

初始值depends on user agent
适用元素all elements
是否是继承属性yes
计算值as specified
Animation typediscrete

浏览器兼容性

BCD tables only load in the browser

参考