在不同页面上显示菜单项

Question

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

第1组标有＆＃34; .homemenuitem＆＃34;

第2组标有＆＃34; .othermenuitem＆＃34;

我想在主页上显示homemenuitems，在其他每个页面上显示其他菜单。

我希望用CSS做到这一点。

我从以下

开始

.home .othermenuitem {
  display: none;
}

在主页上显示正确的菜单，但我无法弄清楚如何在不使用唯一页面ID的情况下在每个其他页面上隐藏homemenuitems（随着网站的增长，这将是一种痛苦）。 / p>

非常感谢任何帮助。

由于

Answer 1

这就是“层叠样式表”的“层叠”部分是你的朋友。更具体的规则总是覆盖不太具体的规则，所以如果你这样做：

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

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

Answer 2

你可以采取其他方式，制作：

.homemenuitem {
  display: none;
}

在您网络的每一个页面中，只显示在主页上的ID？

Answer 3

感谢迈克尔，进一步调整了一下，这对我有用，如果有人在寻找类似的情况。

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

Answer 4

我已经在很多场合试过了，你可以使用这段代码.homemenuitem {display：none; } .home .othermenuitem {display：none; } .home .homemenuitem {display：inline-block; }