Question

即使我应用了相同的样式，并且键入错误为0，但我的第一列样式仍然没有正确设置。最终它只能是列正方形内的文本。

HTML：

<div class="container-fluid">

  <!--Nav Bar-->
    <div class="row">
      <div class="col nav-bar-items">Home</div>
      <div class="col nav-bar-items">About</div>
      <div class="col nav-bar-items">Projects</div>
      <div class="col icon-items">
        <a class="icon-linkedin social-button borderless" href="http://linkedin.com/in/robert-renecker-85a561b8"></a></div>
      <div class="col icon-items">
        <a class="icon-github social-button borderless"href="http://github.com/robertrenecker"></a></div>
      <div class="col nav-bar-items">Contact</div>
    </div>

</div>

CSS：

.col + .nav-bar-items{
  font-weight:600;
  font-size: 25px;
  font-family: 'Source Code Pro', monospace;
  color: #99ebff;
  border-bottom: solid 5px #99ebff;

  border-right: solid 5px black;
}
.col + .nav-bar-items:hover{
  background-color: #99ebff;
  border-bottom: solid 5px black;
  color:black;

}

Answer 1

从此处列出的CSS中删除+运算符。

.col + .nav-bar-items将选择紧随.nav-bar-items之后的任何.col，这就是第一个被跳过的原因。

.col.nav-bar-items将为您提供所需的结果。

Answer 2

.col.nav-bar-items{
  font-weight:600;
  font-size: 25px;
  font-family: 'Source Code Pro', monospace;
  color: #99ebff;
  border-bottom: solid 5px #99ebff;

  border-right: solid 5px black;
}
.col.nav-bar-items:hover{
  background-color: #99ebff;
  border-bottom: solid 5px black;
  color:black;
}

因为+将选择下一个元素

行中的第一列不会像其他列那样

2 个答案: