quotes
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
quotes
CSS 属性用于设置引号的样式。
尝试一下
语法
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;
值
形式语法
示例
基本用法
HTML
html
<q>To be or not to be. That's the question!</q>
CSS
css
q {
quotes: '"' '"' "'" "'";
}
q::before {
content: open-quote;
}
q:after {
content: close-quote;
}
结果
自动选择引号
HTML
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></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
css
/*q {
quotes: auto;
}*/
结果
备注
- 对于大多数浏览器,引号的默认值始终为 auto(Firefox 70+),否则浏览器具有此默认行为(Chromiums,Safari,Edge),因此上面的示例可以在不显式设置的情况下工作。
- 从 Firefox 3.5 开始,可以使用
-moz-initial
读取 quotes 属性的初始值,这在 Firefox 的早期版本中是不可能的。
规范
Specification |
---|
CSS Generated Content Module Level 3 # quotes |
浏览器兼容性
BCD tables only load in the browser