如何修改Quarto网站导航栏中“Home”文字的颜色？

你之前的CSS代码无效是因为错误使用了不存在的text属性选择器——HTML的<a>标签并没有text这个属性，导航项的链接目标是通过href属性定义的，需要调整选择器逻辑：

方法一：通过href属性精准定位 #

直接匹配“Home”链接的href值，确保选中目标元素：

.navbar .nav-item a[href="Quartopage.qmd"] {
  color: #164a58 !important;
}

添加!important是为了覆盖Quarto默认的导航栏样式优先级；如果不想用!important，可以提高选择器权重，比如：

.navbar.navbar-light .navbar-nav .nav-item a[href="Quartopage.qmd"] {
  color: #164a58;
}

方法二：针对活跃状态的导航项 #

如果“Home”是网站默认首页，用户处于该页面时，Quarto会给对应导航项添加active类，此时可直接针对活跃项设置颜色：

.navbar .nav-item.active a {
  color: #164a58;
}

额外说明 #

检查你的_quarto.yml配置，导航栏的foreground已经设置为#164a58，如果默认导航文字未显示该颜色，大概率是活跃状态或其他默认样式覆盖了配置值，上述CSS方法可强制覆盖对应样式。

内容的提问来源于stack exchange，提问作者raph mwanza