在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

quotes CSS property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the CSS content 特性。

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;
quotes: auto;
/* <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

open-quote and close-quote values of the content property produce no quotation marks.

auto

Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang 属性)。

[<string> <string>]+

One or more pairs of <string> values for open-quote and close-quote . The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.

形式定义

初始值	depends on user agent
适用于	所有元素
继承	yes
计算值	如指定
动画类型	discrete

形式句法

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

范例

Basic quote marks

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

结果

Auto quotes

For most browsers, the default value of quotes is auto (Firefox 70+), or the browser otherwise had this default behavior (Chromiums, Safari, Edge), so this example works without it being explicitly being set.

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;
}*/
					

结果

规范

规范	状态	注释
CSS Generated Content Module Level 3 The definition of 'quotes' in that specification.	工作草案
CSS Level 2 (Revision 1) The definition of 'quotes' in that specification.	推荐	初始定义

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
quotes	Chrome 完整支持 11	Edge 完整支持 12	Firefox 完整支持 1.5	IE 完整支持 8	Opera 完整支持 4	Safari 完整支持 9	WebView Android 完整支持 37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 1.0
auto keyword	Chrome 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Edge 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Firefox 完整支持 70	IE 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Opera 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Safari 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	WebView Android 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Chrome Android 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Firefox Android 不支持 No	Opera Android 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Safari iOS 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Samsung Internet Android 不支持 No 注意事项 不支持 No 注意事项 注意事项 This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

另请参阅

• content

元数据

• 最后修改： Jul 21, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Generated Content
4. 特性

   1. content
   2. quotes