Question

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

让我们说主要引用标志是双引号“（开始）和”（结束）。我们还要说二级引号是单引号'（开头）和'（结束）。

考虑报价中的报价如何显示。

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

“双倍”单曲“双”单曲'双曲'单曲'双曲'。

现在，在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

对于任何 n 级别，没有办法编写一个捕获第1，第3，第5等等与第2，第4，第6级相同嵌套元素的规则。

除了理论上的问题，你必须设置类和/或使用javascript。

Answer 2

我无法使用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

相关问题：

Answer 3

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模块可以通过报价生成来解决这个问题，但希望我们很快就会看到这个问题。

CSS“引用报价”问题

3 个答案: