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 |
瀏覽器相容性
載入中…