css不同的页面用同一个导航

在网站开发中，经常会出现相似的页面需要使用同一个导航的需求，比如说网站的首页、新闻列表、文章详情等页面都需要使用同一个导航。这种情况下，我们可以使用CSS实现这个需求，让不同的页面使用同一个导航。

实现这个需求的方法是使用CSS伪类，将不同的页面对应的导航项设置为不同的类，然后在对应的页面中添加该类即可。以下是示例代码：

/* 全局导航样式 */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
}

/* 首页样式 */
.home-nav {
  font-weight: bold;
  color: #f00;
}

/* 新闻列表样式 */
.news-nav {
  font-weight: bold;
  color: #00f;
}

/* 文章详情样式 */
.article-nav {
  font-weight: bold;
  color: #0f0;
} 

在页面中使用该样式的方法为：

<!-- 首页 -->
<nav class="nav home-nav">
  <a href="#">导航一</a>
  <a href="#">导航二</a>
  <a href="#">导航三</a>
</nav>

<!-- 新闻列表 -->
<nav class="nav news-nav">
  <a href="#">导航一</a>
  <a href="#">导航二</a>
  <a href="#">导航三</a>
</nav>

<!-- 文章详情 -->
<nav class="nav article-nav">
  <a href="#">导航一</a>
  <a href="#">导航二</a>
  <a href="#">导航三</a>
</nav> 

通过使用CSS伪类，我们可以轻松地实现不同的页面使用同一个导航的需求，提高网站开发效率，减少代码冗余。