时间戳

首页 > 解决方案 > 使用 Bigcommerce 如何在页眉中隐藏某些导航项目但将它们保留在页脚中？

html - 使用 Bigcommerce 如何在页眉中隐藏某些导航项目但将它们保留在页脚中？

问题描述

我在下面使用了这段代码，它有效。但是我如何从页眉中隐藏其他孩子而不是在页脚中？

  .header  .navPages ul li:last-child { display:none; }

</style>

标签： htmlcssheaderfooterbigcommerce

解决方案

答案会有所不同，具体取决于您是否要单独选择多个导航项目、选择范围等。

这是一个 CSS 示例，它将选择隐藏前 5 个之后的所有导航项：

.header  .navPages ul li:nth-child(n+6) { 
   display:none; 
}

这是隐藏特定导航项（第五个）的示例：

.header  .navPages ul li:nth-child(5) { 
    display:none; 
}

您可以使用针对单个导航项目的多个规则，或者使用第 n 个子选择器按奇数/偶数、每四个项目等进行定位。

如果您想查看更多示例，此页面可能会有所帮助：https ://css-tricks.com/useful-nth-child-recipies/

推荐阅读