css - 如何更改 Squarespace 导航菜单颜色

Question

我们正在使用具有四个页面的 Squarespace 构建一个原型(prototype)商店:

主页、商店、关于、联系方式。

不幸的是，所有页面都从站点的设计模板继承了相同的样式。我们想要做的是类似于 this 的东西，其中某些页面上的链接颜色可以更改。

是否有一种方法可以克服相同的类 class="header-nav-item header-nav-item--collection" 被用于所有页面以便 this type of solution 使用可以应用自定义 CSS 吗？

Answer 1

是的，这是可能的。使用 nth-child() 选择器是一种选择，尽管您可能会考虑通过它的 href 属性来引用元素，就像这样(当然，替换您选择的颜色):

.header-nav-item a[href='/about'] {
  color: red;
}

如果您选择使用 nth-child()，请这样做:

.header-nav-item:nth-child(3) a {
  color: red;
}

最后，要编辑与事件页面(无论用户在哪个页面)相对应的导航项的颜色，您可以这样写:

.header-nav-item.header-nav-item--active a {
    color: blue;
}

最后，如果您想在用户位于特定页面时更改所有导航项的颜色，您可以使用集合 ID 来实现，该集合 ID 用作 id大多数(如果不是全部)Squarespace 模板中 body 元素的属性:

#collection-5d7ef2011673f45f239d1c51 .header-nav-item a {
    color: green;
}

作为有用的提示(您可能已经知道)，您可以使用 browser's developer tools web inspector检查元素，然后根据 Squarespace 生成的规则编写自己的 CSS。