在 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 规则，但它不会覆盖默认的蓝色。

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

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标签，这将有助于覆盖p标签的默认CSS规则。

Answer 2

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

例如）{{ product.description | strip_html }}

查看Shopify Cheat Sheet 了解详情。