Question

我正在尝试在Squarespace上创建一个网站，但在我的HTML页面上选择要在自定义CSS中使用的元素时遇到问题。当我在浏览器上使用inspect元素时，某些元素的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}来自何处，如何选择其中的元素进行样式设计？

Answer 1

在squarespace中执行此操作：

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

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

Answer 2

关于某些ID的变化和一些保持不变，的确如此。有关详细信息，请参阅this answer。总结：

...任何以＆＃34; yui＆＃34;开头的ID可以/将在页面上更改刷新...但是...块ID（ID＆＃39;以＆＃34开头;块 - ＆＃34;不是只要块没有被移除就改变......

关于{squarespace.main-content}来自何处，即JSON-T tag告诉服务器加载内容管理系统（又名＆＃34;布局引擎＆＃34;）中输入的内容那个页面。无论该标记在何处，都将加载该页面的布局引擎内容。

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

最后一点请注意，您不需要使用开发者模式来使用CSS定位元素。你可以简单地定位正确的元素，然后如上所述在CSS编辑器中输入规则，因此根本不需要增加开发者模式的复杂性。

使用SquareSpace编辑html / css

2 个答案: