CSS「Quote in Quote」問題

我試圖找到以下問題的解決方案，如果有的話。CSS「Quote in Quote」問題

可以說主要報價符號是雙引號（「開始」和「結束」）。而且，我們還要說二次報價標誌是一個單一的最高報價'（開始）和'（結束）。

想想如何顯示報價中的報價。

寫作引用的標準當然是交替的，就像這樣。

「雙師型 '單一‘雙師型 '單一' 雙’單'。雙重」

現在，在HTML中，你會這樣寫：

<q>Double <q>single <q>double <q>single </q>double </q>single </q>double.</q>

但是，沒有，這韓元沒有應用CSS規則就行不通。我不打算在這裏使用：lang僞選擇器，所以我只是放棄它。

q:before, 
q q q:before, 
q q q q q:before { content: '「' } 

q:after, 
q q q:after, 
q q q q q:after { content: '」' } 

q q:before, 
q q q q:before, 
q q q q q q:before { content: '‘' } 

q q:after, 
q q q q:after, 
q q q q q q:after { content: '’' }

你明白這是怎麼回事吧？ qs加起來。

所以現在有兩種選擇：要麼我沒有看到以正確的順序選擇q元素的邏輯方式，或者它是不可能的。 PS：我知道在報價中的報價中有報價的報價是非常理論性的。

來源

2012-11-18 reitermarkus

可能重複的[CSS - 替代嵌套樣式（不可能）]（http://stackoverflow.com/questions/10055299/css-alternate-nested-styles-not-possible） –

我不能得到這個，因爲他們嵌套只是CSS選擇nth-child(odd)和nth-child(even)工作，但它是可能使用jQuery：

首先定義你的CSS類：

.e:before {content:'「'} 
.o:before {content:'‘'} 
.e:after {content:'」'} 
.o:after {content:'’'}

然後使用jQuery類添加到每個偶/奇報價：

$("q:odd").addClass('o'); 
$("q:even").addClass('e');

Demo

點

相關的問題：

來源

2012-11-18 21:40:53 sachleen

不是一個壞的解決方案，但人應該小心，因爲jQuery的'：odd'僞選擇符不像CSS'：nth-child（odd）'那樣工作。 –

正確的，這是什麼讓這個解決方案的工作。 '$（「q」）'會給我所有的引用元素，'：odd'會帶有奇數的元素。 CSS選擇器僅選擇父級下相同級別的奇數元素。 – sachleen

謝謝，現在我還了解到，jQuery奇數選擇器不等於CSS奇數選擇器。讓我們希望CSS4將會像本地一樣擁有一個選擇器。 =） – reitermarkus

沒有辦法編寫一個規則，它可以針對任何和級別遞歸捕獲相同嵌套元素的第1,3,5等等與第2,4,6等級。

除了理論問題，你必須設置類和/或使用JavaScript。

來源

2012-11-18 21:39:53

CSS2.1擁有專爲處理quotation marks設計的功能。 quotes屬性特別對嵌套有基本的支持，但它只能支持嵌套到任意深度，而不能遞歸或重複嵌套。

：

因此，雖然目前還沒有一個CSS的解決方案，涵蓋了所有的嵌套級別，你可以在節省從硬編碼嵌套:before相當多的字節，並在您選擇:after僞元素指定深深必要報價

q { quotes: '「' '」' '‘' '’' '「' '」' '‘' '’' '「' '」' '‘' '’' '「' '」' '‘' '’'; } 

/* 
* These should already be in the default UA stylesheet per HTML specs 
* so you should not have to include them, but some older browsers may forget. 
*/ 
q:before { content: open-quote; } 
q:after { content: close-quote; }

您不必擔心瀏覽器的支持，因爲它是相當多的HTML元素q和CSS quotes財產作爲:before和:after相同。

活躍開發中沒有任何CSS3模塊可以解決這個問題，但希望我們很快會看到一些內容。

來源

2012-11-19 05:17:40 BoltClock

CSS「Quote in Quote」問題

回答

相關問題