时间戳

首页 > 解决方案 > 行中的第一列不会像其他列一样样式

html - 行中的第一列不会像其他列一样样式

问题描述

即使我应用了相同的样式并且有 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;

}

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

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

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

.col.nav-bar-items会给你想要的结果。

推荐阅读