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>

如果我删除了直接子选择器（＆gt;），则所有段落都会应用该样式。

我有什么遗失的东西吗？有什么方法可以达到预期的效果吗？

谢谢！

PS：实际上，简化版本有效，我只是在小提琴中进行测试。但真正的HTML是这样的： https://jsfiddle.net/s8ajo1hw/ 并且您可以看到多次选择<p>标记的问题。

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

从小提琴中可以看出，这种行为很奇怪。任何关于为什么会发生这种情况的见解都非常感谢！

Answer 1

只需使用：

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

复杂查询无效，因为：first-letter在选择器的第一个字母上应用样式。

Answer 2

我希望它能帮助你达到预期的效果。将此CSS添加到样式表中。

    div.post_content * > p:first-of-type:first-letter {
        font-size: 24px;
    }

无论有多少，都会选择所有嵌套元素。这个星号*在这里是一个通配符。

<强>更新我对你的代码进行了一些修改，但实际上有太多的嵌套元素，它们可以增长。因此，如果您不介意javascript将此代码段添加到文件的末尾。现在可以解决你的问题。为你的两个小提琴工作。

<style>
    .my-class:first-letter {
        font-size: 60px;
    }
</style>

<script>
    var el = document.getElementsByClassName("wpb_wrapper")[0].getElementsByTagName("p")[0];
    el.className = 'my-class';
</script>

Answer 3

由于::first-letter适用于块级元素第一行的第一个字母＆＃34;你可以定位.post_content：

.post_content:first-letter {
  font-size: 48px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

演示：https://codepen.io/anon/pen/KqZYgy

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

3 个答案: