css - 嵌套的第一个类型和第一个字母

Question

我正在尝试使用 CSS 选择器添加首字下沉功能 first-of-type和 first-letter .

这是针对 WordPress 网站的，我遇到的问题是某些帖子可以使用可视化编辑器构建，而其他帖子可以使用标准编辑器构建。

这意味着内容的内部 html 结构发生了变化(添加了 div)和我的 css 规则 .post_content > p:first-of-type:first-letter { font-size: 24px }不再有效。

<div class="post_content">
    <p>Hello world</p>
    <p>Another line</p>
    <p>Another line</p>
    <p>This shouldn't be dropcaped</p>
    <p>Another line</p>
    <p>Another line</p>
</div>

成为

<div class="post_content">
    <div class="vc_row wpb_row vc_row-fluid">
        <div class="wpb_column vc_column_container vc_col-sm-12">
            <div class="vc_column-inner">
                <div class="wpb_wrapper">
                    <div class="wpb_text_column wpb_content_element ">
                        <div class="wpb_wrapper">
                            <p>Hello world</p>
                            <p>Another line</p>
                            <p>Another line</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="vc_row wpb_row vc_row-fluid">
        <div class="wpb_column vc_column_container vc_col-sm-12">
            <div class="vc_column-inner">
                <div class="wpb_wrapper">
                    <div class="wpb_text_column wpb_content_element ">
                        <div class="wpb_wrapper">
                            <p>This shouldn't be dropcapped</p>
                            <p>Another line</p>
                            <p>Another line</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如果我删除直接子选择器 (>)，所有段落都会应用样式。

有什么我想念的吗？有什么办法可以达到我想要的效果吗？

谢谢!

PS:其实简化版是可以的，我只是胡乱测试了一下。但真正的 html 是这样的: https://jsfiddle.net/s8ajo1hw/你可以看到 <p> 的问题标签被多次选中。

PPS:经过一番摆弄，我发现问题来自p嵌套在单独的 div 中嵌套在 main post_content 中的 s .简化版:https://jsfiddle.net/9v9j3amz/

正如您从 fiddle 中看到的那样，这种行为很奇怪。非常感谢任何关于为什么会发生这种情况的见解!

Answer 1

只需使用:

.post_content:first-letter{
  font-size:34px;
  color: red;
}

复杂查询不起作用，因为 :first-letter 将样式应用于选择器的第一个字母。