在 shopify 中，如何使用 CSS 引用动态部分的特定实例？答案

【问题标题】：In shopify, how do I make refer to a specific instance of a Dynamic Section using CSS?在 shopify 中，如何使用 CSS 引用动态部分的特定实例？
【发布时间】：2020-09-01 14:50:32
【问题描述】：

shopify 中的动态部分具有在渲染期间动态生成的 ID 和分配的类。由于这些可能会因渲染而异，因此 ID 和类都不能用作 CSS 选择器。我想为在我的页面上出现几次的部分的特定实例设置样式，但由于它们都是从同一个模板生成的，因此唯一的区别选择器是动态 ID 和动态类。但这些不是静态的，因此是有风险的。在与 shopify 支持人员交谈后，我在 shopify 文档中也没有找到任何答案。是否有针对 CSS 中动态部分的特定实例的方法？

【问题讨论】：

标签： css shopify liquid

【解决方案1】：

是的，Shopify 向部分添加动态 ID，这些 ID 以 shopify-section- 为前缀，然后附加一个数字，例如 shopify-section-1582309868874，但是使用此流动代码 shopify-section-{{ section.id }}，您应该能够重新生成该 ID .

您还可以为部分添加唯一的类名，可以在部分设置中添加，例如：

{% schema %}
  {
    "name": "Slideshow",
    "class": "slideshow-xyz"
  }
{% endschema %}

<div id="shopify-section-[id]" class="shopify-section slideshow-xyz">
  [output of the section template]
</div>

refe

要定位页面中的特定部分，您需要在该部分内添加 <style type="text/css"> - 通常我会在标记之后和部分设置之前添加它（又名 {% schema %}） - 并在 style 标记内通过动态生成的 id #shopify-section-{{ section.id }} 引用部分 id，这里是一个示例：

<style type="text/css">
  #shopify-section-{{ section.id }} {
    {% if section.settings.background_color != blank %}
      background-color: {{section.settings.background_color}};
    {% endif %}
  }
</style>

【讨论】：

谢谢卡里姆/达曼，不过我不确定我是否 100% 关注你。如果我在架构中添加一个类，那么它将被添加到该类型的所有部分（在您的示例中，所有幻灯片），所以它不会是唯一的。我错了吗？此外，在我看来，在模板样式中包含 #shopify-section-{{ section.id }} 将引用模板呈现的每个部分，并且唯一部分实例的唯一特定限定符是您的“if”语句。我错了吗？
每个版块都有唯一的ID，同一个页面不会有两个版块具有相同的ID，毕竟这就是ID的意义所在。您对类是正确的，此方法仅适用于您添加到主页/索引以外的页面的静态部分。对于动态部分，您可以在类名称 <div class="shopify-section-{{ section.id }}">...</div> 的部分内容周围添加一个 HTML 包装器，但在这种情况下，使用 ID 对我来说更有意义。