html - 如何使用 CSS 类和 ID 选择器

Question

我是 css 新手，我一直在尝试设计一个漂亮的主页，但对使用正确的选择器感到困惑。 我使用无序列表很好地设计了按钮，但其他内容中的列表也继承了按钮的格式。

我应该如何为无序按钮列表分配一个或两个类？
非常感谢! 我希望类(class)有以下代码。 这是我用于按钮的代码。

/* button styling */

ul {
 list-style: none;
  margin: 0;
}

li {
  float: left;
}

a {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: block;
  font-size: 11px;
  font-weight: bold;
  padding: 0 20px;
  line-height: 38px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

a:hover {
  background: #454d59;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  color: #d0d2d5;
}

li:first-child a {
  border-left: none;
  border-radius: 4px 0 0 4px;
}

li:last-child a {
  border-right: none;
  border-radius: 0 4px 4px 0;
}

Answer 1

您应该调整选择器的范围以使它们更加明确。

一个好方法是，如果您的 ul 位于 header 元素中:

header ul {}
header ul li {}

或者，如果它位于某个具有 id #navigation 的元素中:

#navigation ul {}
#navigation ul li {}

这将影响 header 或 #navigation 内的所有 ul 元素。

另一种方法是将 ID 添加到 html 中的未排序列表中:

<ul id="navigation">
  <li></li>
</ul>

在这种情况下，您可以在选择器中仅使用该 ID:

ul#navigation {}
ul#navigation li {}

或者只是:

#navigation {}
#navigation li {}