quotes
CSS quotes 属性设置浏览器应如何渲染自动添加到 HTML <q> 元素或通过 CSS content 属性的 open-quotes 或 close-quotes 值（或通过 no-open-quote 和 no-close-quote 值省略）添加的引号。
试一试
quotes: none;
quotes: initial;
quotes: "'" "'";
quotes: "„" "“" "‚" "‘";
quotes: "«" "»" "‹" "›";
<section id="default-example">
<q id="example-element"
>Show us the wonder-working <q>Brothers,</q> let them come out publicly—and
we will believe in them!</q
>
</section>
q {
font-size: 1.2rem;
}
浏览器在 <q> 元素的开头和结尾以及 content 属性的 open-quote 和 close-quote 值处插入引号。每个开引号或闭引号都会根据嵌套深度被替换为 quotes 值中的一个字符串，或者，如果 quotes 明确设置为或解析为 auto，则使用的引号是取决于语言的。
语法
/* Keyword value */
quotes: none;
quotes: auto;
/* <string> values */
quotes: "«" "»"; /* Set open-quote and close-quote to use French quotation marks */
quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */
/* Global values */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: revert-layer;
quotes: unset;
值
none-
content属性的open-quote和close-quote值不产生引号，就像分别设置了no-open-quote和no-close-quote一样。 auto-
适用于继承语言（即，通过在父元素或其他祖先元素上设置的
lang属性）的排版引号。 <string>-
定义一个或多个用于开引号和闭引号的引号值对。在每对中，每对引号中的第一个用作
open-quote的值，每对中的第二个用作close-quote。第一对代表引号的外层。第二对（如果存在）代表第一个嵌套层。下一对用于双层嵌套，依此类推。如果引号嵌套的深度大于对的数量，则
quotes值中的最后一对将被重复使用。使用哪对引号取决于引号的深度或嵌套级别：在当前出现之前所有生成文本中
<q>引号或open-quote（或no-open-quote）的出现次数，减去闭引号（</q>、close-quote或no-close-quote）的出现次数。如果深度为 0，则使用第一对；如果深度为 1，则使用第二对，依此类推。
注意：CSS content 属性值 open-quote 增加引用级别，no-close-quote 减少引用级别，但不会插入引号。
正式定义
正式语法
quotes =
auto |
none |
match-parent |
[ <string> <string> ]+
示例
默认引号和覆盖
此示例比较了语义 HTML <q> 元素提供的默认引号与我们使用 CSS quotes 属性定义的引号。
quotes 的默认值为 auto。在此示例中，第一个列表项设置了 quotes: auto，因此获取指定语言的默认引号；与未设置 quotes 属性时相同。第二个列表项定义了用于引号和嵌套引号的引号；这些引号将用于具有 specialQuotes 类的元素的后代，无论语言如何（如设置的任何 lang 属性值）。
HTML
<ul>
<li>
Default quotes:
<p lang="ru">
<q
>Митч Макконнелл - это человек, который знает о России и ее влиянии
меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
Трамп</q
>, - писал Раджу.
</p>
</li>
<li class="specialQuotes">
Defined by <code>quotes</code> property :
<p lang="ru">
<q
>Митч Макконнелл - это человек, который знает о России и ее влиянии
меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
Трамп</q
>, - писал Раджу.
</p>
</li>
<ul></ul>
</ul>
CSS
li {
quotes: auto;
}
.specialQuotes {
quotes: "“" "”" "‘" "’";
}
结果
默认情况下，当使用 <q> 元素时，浏览器会提供特定语言的引号。如果定义了 quotes 属性，则提供的值将覆盖浏览器的默认值。请注意，quotes 属性是继承的。quotes 属性设置在具有 specialQuotes 类的 <li> 上，但引号应用于 <q> 元素。
请注意，每个开引号和闭引号都会根据嵌套深度被替换为引号值中的一个字符串。
自动引号
quotes 的默认值为 auto。此示例无需显式设置即可工作。
HTML
<ul>
<li lang="fr">
<q>Ceci est une citation française.</q>
</li>
<li lang="ru">
<q>Это русская цитата</q>
</li>
<li lang="de">
<q>Dies ist ein deutsches Zitat</q>
</li>
<li lang="en">
<q>This is an English quote.</q>
</li>
</ul>
CSS
q {
quotes: auto;
}
li:not(:last-of-type) {
border-bottom: 1px solid;
}
结果
请注意，lang 属性放置在 <q> 的祖先元素上，而不是 <q> 本身。如果引用的文本与周围文本的语言不同，通常习惯用周围文本的语言引号来引用文本，而不是引用文本本身的语言。
与生成内容结合使用
在此示例中，我们不使用 <q> 元素，而是将引号添加到每个具有特定类名的元素内容之前和之后的 ::before 和 ::after 伪元素中。
HTML
<p>
<span class="quote">I should be using quotes</span>, I thought,
<span class="quote"
>But why use semantic HTML elements when I can add classes to
<span class="quote">ALL THE THINGS!</span>?
</span>
</p>
CSS
.quote {
quotes: '"' '"' "'" "'";
}
.quote::before {
content: open-quote;
}
.quote::after {
content: close-quote;
}
结果
文本作为引号和空引号
此示例演示了使用引号以外的字符作为 <string> 值。开引号表示说话人，由于没有开引号，闭引号为空。（不支持将 <string> 与枚举关键字混合以创建一对）。我们为嵌套引号设置了 auto。这些嵌套引号将由语言规定为正常嵌套引号的任何内容包裹。
HTML
<ul>
<li><q data-speaker="karen">Hello</q></li>
<li><q data-speaker="chad">Hi</q></li>
<li><q data-speaker="karen">this conversation is not interesting</q></li>
<li>
<q data-speaker="pat"
>OMG! <q>Hi</q>? Seriously? at least <q>hello</q> is five letters long.</q
>
</li>
</ul>
CSS
[data-speaker="karen" i] {
quotes: "She said: " "";
}
[data-speaker="chad" i] {
quotes: "He said: " "";
}
[data-speaker="pat" i] {
quotes: "They said: " "";
}
[data-speaker] q {
quotes: auto;
}
结果
规范
| 规范 |
|---|
| CSS Generated Content Module Level 3 # quotes |
浏览器兼容性
加载中…