quotes
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;
值
语法格式
示例
基本用法
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