在 Shopify 和 Liquid 中覆盖 CSS 样式

Question

我有一个 Shopify 产品页面，我需要在不同部分为相同的产品描述设置不同的字体颜色。

在下面的部分，我需要字体是#333333.

<div>   
    <section>
        <p class="hero-description">{{ product.description }}</p>
    </section>
</div>

而在下面的部分，我需要字体为#ffffff。

<div>   
    <section>
        <p class="boxed-description">{{ product.description }}</p>
    </section>
</div>

我将CSS分别创建为：

p.hero-description{
    color:#333333!important;
}

第二个部分：

p.boxed-description {
    color:#ffffff !important;
}

然而，当 {{ product.description }} 中的 Liquid 代码执行时，如下所示：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

"p" 标签由 Sopify CSS 自动添加，然后从正文中获取字体颜色 - 这是蓝色，而不是我在定义的部分中需要字体的颜色是。

我试过 !important 规则，但它没有覆盖默认的蓝色。

如何将这 2 个部分中的默认字体颜色覆盖为我需要的颜色？

Answer 1

为什么不像

那样构造你的液体

<div>   
    <section>
        <div class="boxed-description"><!-- or .hero-description -->
            {{ product.description }}
        </div>
    </section>
</div>

并且CSS喜欢

.hero-description,
.hero-description > p {
   color:#333333;
}
.boxed-description,
.boxed-description > p {
    color:#ffffff;
}

没有 p 元素级选择器限定规则。这样您就可以合理地期望您的类出现在 DOM 中，而不管用户输入来自富文本编辑器的内容。此外，使用 > p（直接祖先）将有助于以高度特异性定位 shopify 添加的 p 标签，这将有助于覆盖 [=12= 的默认 CSS 规则] 标签。

Answer 2

这可能不是您所需要的，但请记住，您还可以在液体中添加 strip_html 过滤器以防止额外的 <p> 从一开始就添加的标签。

例）{{ product.description | strip_html }}

查看此 Shopify Cheat Sheet 了解详细信息。

在 Shopify 和 Liquid 中覆盖 CSS 样式

Override CSS style in Shopify and Liquid

html

css

liquid

shopify