如何仅为导航栏设置样式而不影响页面中所有列表？

嘿，这个问题太常见啦，刚接触CSS的时候很容易踩这个坑😉

你现在的问题出在全局的ul选择器——因为CSS里的标签选择器（比如ul）会匹配页面上所有对应的元素，所以你给导航栏写的样式就“跑”到其他列表上去了。要只给导航栏的列表设置样式，有几个简单的办法：

方法1：给导航栏的列表添加类（推荐） #

这是最灵活的方式，以后如果有多个导航栏也能复用样式。

修改HTML： #

给导航栏的<ul>加上一个自定义类，比如nav-list：

<ul class="nav-list">
  <!-- 导航栏的列表项 -->
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我</a></li>
</ul>

<!-- 其他不受影响的列表 -->
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

修改CSS： #

把原来全局的ul选择器换成类选择器.nav-list：

#map { 
  width: 100%; 
  height: 400px; 
  background-color: grey; 
} 

/* 只作用于带nav-list类的ul */
.nav-list { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  /* 你原来的其他导航栏样式 */
}

方法2：使用ID选择器（适合唯一的导航栏） #

如果页面上只有一个导航栏，也可以用ID来定位：

修改HTML： #

<ul id="main-nav">
  <!-- 导航栏列表项 -->
</ul>

修改CSS： #

#main-nav { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
}

这样修改后，只有你标记过的导航栏列表会应用样式，其他普通的<ul>就会保持默认样式啦～

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