如何解决将标识符添加到 squarespace 部分
使用 Squarespace 的“添加部分”按钮并选择部分样式。有没有办法标记部分,以便可以使用客户代码专门针对它们?例如。假设我想获取所有与“产品”和“销售”相关的部分,并使用自定义 CSS 对它们进行不同的样式设置?注意:某些部分样式上没有“标签”,例如列表。
解决方法
不幸的是,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 部分的其他自定义样式。像这样:
.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="5f870b2e692993607c0b1ba2"]';
@{salesSections} {
// Your CSS Here
}
请记住,上面的最后两个代码片段使用了 LESS CSS,Squarespace 仅在 CSS 编辑器中(而不在代码块中)支持。它不是标准的 CSS。后两个示例中的第一个还说明了使用 LESS 嵌套,以便将自定义样式应用于销售相关部分中的所有无序列表元素 (ul
)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。