Squarespace 是否不允许在自定义 HTML 中使用 class 和 id 选择器，然后在 CSS 编辑器中定位？

Question

你好 Whosebug 社区，

我刚开始使用 Squarespace 为客户和朋友创建一个网站，提供一些安全和设备培训课程，我喜欢这些模板，拖放操作非常容易使用。但是，我运行遇到了课程目录页面的问题。我正在添加自定义 HTML 以允许包含描述的布局精美的列表，但 class 和 id 选择器只是不针对元素。以 <li> 和 <ul> 元素为目标，在站点范围内将它们全部定位。任何有使用 Squarespace 经验的人，您能否分享您关于我如何定位特定元素的知识？非常感谢。

我在 Squarespace 论坛上做了 post，但没有收到任何回复，所以我来了。

Answer 1

对于与 Squarespace 相关的问题（在 Answers 论坛和 SO 此处），如果您提供相关页面的 URL 和 view-only password 通常最容易提供解决方案如果适用（对于处于试用模式且尚未付款的网站是必需的）。

在任何情况下，假设您正在使用 code block in order to insert your HTML, you can add a classes to your elements in your HTML and then target them by adding CSS via the CSS Editor，或在带有代码块本身的 style 标签内。

例如，如果将其全部放在代码块本身中，则类似于：

<ul class="myclass1 myclass2">
  <li>List item one.</li>
  <li>List item two.</li>
</ul>

<style>
  .myclass1 li {
    color: red;
  }
</style>

现在，如果您要通过 CSS 编辑器添加 CSS，您将从上面的代码块中排除 <style>...</style> 位，而是通过CSS编辑。

.myclass1 {
  color: red;
}

请注意，当使用 CSS 编辑器时，<style> 标签被排除在外。

如果以上都不起作用，可能是因为您正在处理 Squarespace 自己的规则，该规则具有更高级别的 specificity. That simply means that Squarespace's default CSS rules are overriding your own. To compensate for this, you can either rewrite the rule above as color: red !important; or use your browser's developer tools 网络检查器 select 有问题的元素，检查 CSS 适用于它的规则（这将显示 Squarespace 的默认规则），然后以相同或更高的特异性重写您的规则。

最后，如果我最初假设您使用的是代码块是不正确的，那么您实际上使用的是 text block。仍然可以针对 Squarespace 中特定块中的特定元素。为此，您必须使用块 ID。

要获取块 ID，您必须熟练使用浏览器的网络检查器（前面提到过）。使用它，找到有问题的块。

请注意，您不想使用以 yui... 开头的块 ID。这些 ID 是动态生成的，并随着每次页面加载而变化。以其他任何开头的 ID 都可以使用，例如 block-yui....

获得区块 ID 后，您可以将其用作 CSS 的一部分，如下所示：

#block-yui_3_17_2_3_1425032049582_4670 ul li {
  color: red;
}

再次强调，特异性可能是一个问题，因此您可能必须添加 !important 或编写具有更高特异性的规则，如上所述。

通常，很难在 Answers 上真正得到答案； Whosebug 可能更有效。

Squarespace 是否不允许在自定义 HTML 中使用 class 和 id 选择器，然后在 CSS 编辑器中定位？

Does Squarespace not allow for class and id selectors to be used in custom HTML and then targeted in the CSS editor?

html

css

css-selectors

squarespace