使用 Squarespace 编辑 html/css答案

【问题标题】：Using Squarespace to edit html/css使用 Squarespace 编辑 html/css
【发布时间】：2016-06-17 20:33:40
【问题描述】：

我正在尝试在 Squarespace 上创建一个网站，但无法在我的 HTML 页面上选择要在自定义 css 中使用的元素。当我在浏览器上使用检查元素时，某些元素的 ID 会发生变化，而其他元素的 ID 是不变的。

我正在运行开发者模式并通过 github 将代码下载到我的本地计算机。

在downloaded site.region 文件中，我找到了div 元素，其中包含我要设置样式的内容：

<div id="content" class="main-content" data-content-field="main-content" data-collection-id="{collection.id}" {.equal? collection.typeName "gallery"}{.or}{.equal? collection.typeName "index"}{.or}data-edit-main-image="Banner"{.end}{.end}>
     {squarespace.main-content}
</div>

{squarespace.main-content} 来自哪里，如何选择其中的元素来设置样式？

【问题讨论】：

标签： html css squarespace

【解决方案1】：

关于一些 ID 变化和一些保持不变，确实如此。有关这方面的更多信息，请参阅this answer。总结：

...任何以“yui”开头的 ID 都可以/将在页面上更改刷新...然而...块 ID（以“block-”开头的 ID 不只要块没有被移除就改变......

关于{squarespace.main-content} 的来源，这是一个JSON-T tag，它告诉服务器加载在该页面的内容管理系统（又名“布局引擎”）中输入的内容。无论该标签在哪里，都会加载来自 Layout Engine 的该页面的内容。

最后，关于如何选择主要内容中的元素以使用 CSS 进行样式设置，您是在正确的轨道上。像你一样检查元素。如果您想定位特定块，请查找以 block- 开头的 ID 并将其定位。或者找到其他方法来定位元素，例如:first-child 或nth-child 选择器。然后在the CSS Editor 中输入您的 CSS，或者，如果您使用的是开发人员模式（如您所指出的那样），则将规则添加到您的 base.less 文件（或视情况而定的其他 CSS 文件），然后更新你的模板using Git or SFTP。

最后一点，您不需要使用开发人员模式来定位具有 CSS 的元素。您可以像提到的那样简单地定位正确的元素，然后在提到的 CSS 编辑器中输入规则，因此可能根本不需要增加开发人员模式的复杂性。

【讨论】：

【解决方案2】：

在正方形空间中这样做：

打开开发者选项（编辑JS至少是强制性的，不确定CSS），
转到设计 »» 自定义 CSS
在那里添加/更改任何你喜欢的东西，你应该像nth-child/nth-of-type这样的样式类或css选择器而不是那些动态ID。

您可以在此处查看更多信息：

【讨论】：