Css 在不同页面上显示菜单项

我的导航栏中有两组菜单项

集合1的标签为“.homemenuitem”

集合2的标签为“.othermenuitem”

我想在主页上显示homemenuitems，在其他页面上显示其他MenuItems

我希望用CSS来实现这一点

我从以下几点开始

.home .othermenuitem {
  display: none;
}

它在主页上显示了正确的菜单，但我不知道如何在不使用唯一的页面id的情况下在其他页面上隐藏homemenuitems（随着网站的发展，这将是一件痛苦的事情）

任何帮助都将不胜感激

---

谢谢

这就是“层叠样式表”中的“层叠”部分。更具体的规则总是覆盖不太具体的规则，因此如果您这样做：

.homemenuitems {
    display: none;
}
.home .homemenuitems {
    display: block; /* or 'inline' or 'inline-block', as necessary */
}

---

然后，后一条规则将在其匹配的位置（在主页上）覆盖前一条规则，否则，第一条规则将始终生效。

您是否可以采取另一种方式，使：

.homemenuitem {
  display: none;
}

---

在你网站的每一个页面上，并且只在主页id上显示？

谢谢Michael，对它进行了进一步的调整，如果有人在寻找类似的情况，这对我来说是有效的

.homemenuitem {
    display: none;
}
.home .othermenuitem {
    display: none;
}
.home .homemenuitem {
    display: inline-block;
}

---

我已经尝试过很多次了，您可以使用以下代码。homemenuitem{display:none；}.home.othermenuitem{display:none；}.home.homemenuitem{display:inline block；}

如果您有不同的页面，为什么要在这些页面上包含homemenuitems？