3

もしあれば、私は次の問題の解決策を見つけようとしています。

一次引用符が二重引用符「（開始）」と「」（終了）であるとします。また、二次引用符が単一引用符'（開始）と'（終了）であるとしましょう。

見積もりの​​見積もりがどのように表示されるかを考えてください。

もちろん、引用符を書く標準は、このように交互になります。

「ダブル」シングル「ダブル」シングル「ダブル」シングル「ダブル」</p>

さて、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は加算されます。

したがって、2つのオプションがあります。q要素を正しい順序で選択する論理的な方法が見当たらないか、それが不可能なだけです。

PS：引用符で引用符を引用符で囲むことは、非常に理論的です。

4

3 に答える 3

2

任意のnレベルに対して再帰的に、同一のネストされた要素の1番目、3番目、5番目などと2番目、4番目、6番目のレベルをキャッチするルールを作成する方法はありません。

理論上の問題とは別に、クラスを設定したり、JavaScriptを使用したりする必要があります。

于 2012-11-18T21:39:53.493 に答える
2

nth-child(odd)これをCSSセレクターだけで機能させることはできませんでした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');

デモ

関連する質問：

于 2012-11-18T21:40:53.300 に答える
2

CSS2.1には、引用符を処理するために特別に設計された機能があります。特にこの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; }

qHTML要素とCSSquotesプロパティについては、:beforeととほとんど同じであるため、ブラウザのサポートについて心配する必要はありません:after。

見積もりの​​生成に関するこの問題に対処するCSS3モジュールはまだ活発に開発されていませんが、近いうちに何かが見つかることを願っています。

于 2012-11-19T05:17:40.363 に答える