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

问题描述

shopify中的

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

解决方法

是的，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"> –通常，我会在标记之后和部分设置（aka {% 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>

liquid shopify