Html 覆盖Shopify和Liquid中的CSS样式

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

在下面的部分中，我需要字体为333

第二部分：

但是，当执行{{product.description}}中的液体代码时，它如下所示：

<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自动添加，并从主体中获取字体颜色-这是一种蓝色，而不是我需要的定义部分中字体的颜色

我已经试过了！重要规则，但它不会覆盖默认的蓝色

---

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

为什么不将您的液体结构设置为

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

---

没有p元素级别选择器限定规则。这样，您就可以合理地期望您的类出现在DOM中，而不管用户从富文本编辑器输入什么。此外，使用>p直系祖先将有助于以高度特异性的shopify添加的p标签为目标，这将有助于覆盖p标签的默认CSS规则。

为什么不构建类似液体的标签呢

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

---

没有p元素级别选择器限定规则。这样，您就可以合理地期望您的类出现在DOM中，而不管用户从富文本编辑器输入什么。此外，使用>p直接祖先将有助于以高度特异性的shopify添加的p标记为目标，这将有助于覆盖p标记的默认CSS规则。

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

e、 g.{{product.description | strip_html}

---

查看此页了解详细信息。

这可能不是您所需要的，但请记住，您也可以在液体中添加strip_html过滤器，以防止添加额外的标签

e、 g.{{product.description | strip_html}

---

有关详细信息，请查看此项。

当您说蓝色时，您是指边框吗？不，我的意思是默认情况下主体字体颜色为蓝色，对不起。您可以将类添加到部分或选择这些部分吗？然后，只需将颜色添加到分区。我尝试添加一个类，将分区的字体设置为333333或ffffff，但这也不起作用。当你说蓝色时，你是指边框吗？不，我的意思是默认情况下主体字体颜色为蓝色，对不起。你能将类添加到分区还是选择这些分区？然后将颜色添加到部分。我尝试添加一个类，将部分的字体设置为333333或ffffff，但这也不起作用。我也尝试过，但文本编辑器会自动添加一个p标记。因此，当它执行液体代码时，它会从文本编辑器中获取添加了p的描述，字体默认为默认的蓝色。更新以添加额外的特殊性规则。告诉我是否有用！天才解决了。我也试过了，但是文本编辑器会自动添加一个p标记。因此，当它执行液体代码时，它会从文本编辑器中获取添加了p的描述，字体默认为默认的蓝色。更新以添加额外的特殊性规则。告诉我是否有用！天才好的，谢谢。我不知道那个把戏。将来一定会派上用场的。谢谢。我不知道那个把戏。将来一定会派上用场的。

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

<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>

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

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