Jekyll中Liquid标签输出内容的CSS类选择器样式不生效如何解决？

问题根因 #

• Jekyll 生成的post.excerpt默认会被Markdown解析器自动包裹一层<p>标签
• HTML 规范不允许<p>标签嵌套，浏览器遇到内层<p>时会自动提前闭合外层的<p class="post-excerpt">，导致你写的样式无法正确匹配到内容节点

可选用的解决方案 #

方案1：更换外层包裹标签（最推荐） #

把外层不支持嵌套块级元素的<p>标签替换为<div>这类允许嵌套的容器标签：

<div class="post-excerpt">
    {{post.excerpt | truncatewords : 40 }}
</div>

如果需要样式作用到内层内容，调整CSS选择器即可：

.post-excerpt p {
   font-size: 1.2vw;
   /* 其余样式 */
}

方案2：移除excerpt自带的

标签 #

通过Liquid过滤器剥离post.excerpt自动生成的段落标签，避免嵌套问题：

<p class="post-excerpt">
    {{post.excerpt | truncatewords : 40 | remove: '<p>' | remove: '</p>' }}
</p>

原有CSS无需修改即可直接生效。

方案3：直接适配现有嵌套结构 #

如果不想修改HTML代码，可以直接调整CSS选择器同时匹配外层和内层元素：

.post-excerpt, .post-excerpt p {
   font-size: 1.2vw;
   /* 其余样式 */
}

内容的提问来源于stack exchange，提问作者intergalacticmammoth