css - CSS "Quote in a Quote"问题

Question

我正在尝试找到以下问题的解决方案，如果有的话。

假设主引号是双引号“(开始)和”(结束)。假设第二个引号是单引号‘(开始)和’(结束)。

想想如何显示引号中的引号。

写引号的标准当然是交替的，像这样。

“Double ‘single “double ‘single’ double” single’ double.”

现在，在 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:我知道在引用中引用引用是非常理论化的。

Answer 1

我不能只使用 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

相关问题:

• CSS refer to every odd nested child?
• querySelector with nested nth-child in Chrome doesn't appear to work