如何为同类型标签设置不同样式？如何仅为单个无序列表应用指定CSS？

看你描述的问题，应该是没把类选择器和子元素的样式正确关联起来。直接写ul、li会选中页面上所有对应的标签，所以得给目标ul加个专属class，然后让CSS的选择器基于这个class来定位它的子元素。

正确的操作步骤： #

1. 给目标ul添加class：

<!-- 这个是你要设置样式的ul -->
<ul class="special-nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

<!-- 这个普通ul不会被上面的CSS影响 -->
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

2. 修改CSS选择器，绑定class：
   把原来的全局选择器前面加上.special-nav，这样样式就只会应用到带有这个class的ul及其子元素了：

/* 只选中带有special-nav类的ul */
ul.special-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #C0C0C0;
  border-bottom: solid #008348;
}

/* 只选中special-nav下的li */
ul.special-nav li {
  float: left;
}

/* 只选中special-nav下的li里的a标签 */
ul.special-nav li a {
  display: block;
  color: #000000;
  font-size: 15px;
  text-align: left;
  padding: 10px 10px;
  text-decoration: none;
  background-color: #C0C0C0; /* 补全你之前没写完的颜色值 */
}

为啥之前没成功？ #

大概率是你只给ul加了class，但CSS里还是直接写ul、li，没把class和子元素选择器结合起来，导致样式还是全局生效。另外检查下class名的拼写，HTML里的class="xxx"和CSS里的.xxx要完全一致，大小写是敏感的哦。

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