css - Django 鹡鸰 :- RichTextField vs Streamfields RichTextBlock styling first letter of paragraph.

Question

现在我对这两个人有点恼火。我需要特别设计段落的第一个字母。使用 RichTextField 时，模板中的示例代码有效。在某种程度上，它设置了 RichTextField 的第一个字母的样式，而不是其中每个段落的第一个字母的样式。

<span class="first-letter-styling">{{ page.translated_body | striptags | make_list | first }}</span>

{{ page.translated_body | slice:"4:" |  richtext }}

但是，当尝试对流字段中的 block (RichTextBlock)执行相同操作时，上述操作不起作用。它简单地输出了整个 block ，我什至不需要添加“| richtext”过滤器。

{% for block in blocks %}
    {% if block.block_type == 'block' %}
        {% with bs=block.value %}
            <h2>{{ bs.title }}</h2>
            <p>
                <span class="first-letter-styling">{{ bs.content | striptags | make_list | first }}</span>
            </p>
            <p>{{ bs.content | slice:"4:" |  richtext }}</p>
        {% endwith %}
    {% endif %}
{% endfor %}

所以这段代码的目的是采用第一个字母的样式，然后继续段落的其余部分。然而，这不起作用，它采用第一个字母样式，然后打印包括第一个字母在内的整个段落。

所以问题是:

我如何为 RichTextField 和 RichTextBlock 设计段落的每个首字母，而不仅仅是整个元素的首字母。

我如何确保它仅适用于段落中的内容。即如果有人只用元素符号 (ul) 填充内容。首字母样式将不适用。如果我们可以从 RichTextFiel 和 RichTextBlock 的 wagtail 管理面板简单地完成所有这些样式，那么最好的方法就是这样做。

Answer 1

无需将第一个字母包装在 <span> 中设置样式 - CSS 提供了一个 first-letter伪元素。将其与 <div class="rich-text"> 结合起来哪个 Wagtail 自动放置在每个富文本元素周围，您的 CSS 规则将类似于:

.rich-text > p:first-letter {
    color: red;
}