quotes - CSS（层叠样式表） 编辑

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

语法

/* 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 type	discrete

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参考

• content