Question

我有这个CSS：

leftJoin()

这是我的HTML：

#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;
}

我想将 a 分为两组，普通和粗体。我试过这个：

<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>

但是这没用。如何为此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>

Answer 2

您有bold和normal类li而不是a。

更改css，如：

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

<强> Fiddle

或者

#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;
}

Answer 3

CSS

#cssmenu a{
  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{
   font-weight: bold;
}

HTML

<div id="cssmenu">
<a class="bold"/>
</div

如何在CSS中定义类

3 个答案: