将标识符添加到方形空间部分

Question

使用Squarespace"添加剖面"按钮并选择剖面样式。有没有一种方法可以标记部分，以便使用客户代码专门针对它们？例如比方说，我想抓住所有与"；"产品"；然后"；销售；并使用自定义CSS进行不同的样式设置？注意：有些节样式没有"；标签"；例如列表。

Answer 1

不幸的是，Squarespace在7.1版本中删除了自定义节ID的功能(这是撰写本文时的最新版本(。这在您的情况下可能很有用，但听起来您想要的是将自定义类分配给特定部分的能力，而这不是Squarespace提供的功能。

这方面的典型解决方法是通过data-section-id属性来针对部分，如下所示：

section[data-section-id="5f870b03756b454a0f310e88"] {
/* Your CSS Here */
}

如果你有多个想要瞄准的部分，它通常看起来像：

section[data-section-id="5f870b03756b454a0f310e88"],
section[data-section-id="5f32be4fe69e956b3c47c805"],
section[data-section-id="5f870b2e692993607c0b1ba2"] {
/* Your CSS Here */
}

Squarespace支持LESS CSS，可以在类似的情况下使用。例如，您可以将所有的Sales部分样式分配给一个类。然后，当为Sales定制一个部分时，您可以将该类与其他可能不适用于其他Sales部分的自定义样式一起应用。类似这样的东西：

.salesSectionStyles {
// Your Sales section-related CSS Here
ul {
// custom list styles here.
}
}
section[data-section-id="5f870b03756b454a0f310e88"] {
.salesSectionStyles;
// More custom CSS here.
}
section[data-section-id="5f32be4fe69e956b3c47c805"] {
.salesSectionStyles;
// Even more custom CSS here.
}

或者，使用LESS，您可以维护一个变量，如@salesSections(为其分配一个包含所有销售相关部分的选择器的字符串(，然后将CSS应用于该变量。在大多数情况下，我不推荐这种方法，但它看起来像这样：

@salesSections: ~'section[data-section-id="5f870b03756b454a0f310e88"], section[data-section-id="5f32be4fe69e956b3c47c805"], section[data-section-id="5f870b2e692993607c0b1ba2"]';

@{salesSections} {
// Your CSS Here
}

请记住，上面的最后两个代码片段使用了LESS CSS，这是Squarespace仅在CSS编辑器中支持的(而不是在代码块中(。它不是标准的CSS。最后两个示例中的第一个示例还说明了使用LESS嵌套，以便将自定义样式应用于Sales相关部分中的所有无序列表元素(ul(。