html - 如何在 CSS 中定义类

Question

我有这个 CSS :

#cssmenu {
  background: #333;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 12em;
}
#cssmenu a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 1px;
  text-decoration: none;
  font-weight: normal;
}

这是我的 html :

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='normal'><a href='#'><span>Products</span></a></li>
   <li class='bold'><a href='#'><span>Company</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

我想将a分成两组，正常和粗体。我试过这个:

#cssmenu a.normal {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 1px;
  text-decoration: none;
  font-weight: normal;
}
#cssmenu a.bold{
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 1px;
  text-decoration: none;
  font-weight: bold;
}

但这没有用。我怎样才能为这个 CSS 文件正确地赋予类？谢谢。

Answer 1

在任何你想要bold的地方添加一个类到#cssmenu a

.bold{
   font-weight: bold;
}

任何你想要normal的地方，移除bold class

#cssmenu li.normal span{
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 1px;
  text-decoration: none;
  font-weight: normal;
}
#cssmenu li.bold span{
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 1px;
  text-decoration: none;
  font-weight: bold;
}

<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'><span>Home</span></a></li>
   <li class='normal'><a href='#'><span>Products</span></a></li>
   <li class='bold'><a href='#'><span>Company</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>