Question

我们正在使用Squarespace的四个页面来建立原型商店：

[ { "item_type": "Computer", "purch_price": 700, "sale_price": "", "shop_details": [ { "city": "'Los Angeles'", "location": "'1st street'" }, { "city": "'San Jose'", "location": "'2nd street'" } ] }, { "item_type": "Iphone", "purch_price": 1200, "sale_price": 1150.0, "shop_details": [] } ]

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

是否有一种方法可以克服这样的事实，即可以为所有页面使用相同的类Home, Store, About, Contact.，以便可以使用自定义CSS来this type of solution？

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。

如何更改Squarespace导航菜单颜色

1 个答案: