Html 从CSS中的ul li元素中删除红色边框

我有以下html代码：

<div class="nav">
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="home2"><a class="active" href="#">Home2</a></li>
        <li class="home3"><a href="#">Home3</a></li>
        <li class="home4"><a href="#">Home4</a></li>
        <li class="home5"><a href="#">Home5</a></li>
      </ul>
    </div>  
<div class="post">
    <div id="borders">
        <ul>
            <li>red border</li>
            <li>red border</li>
            <li>red border</li>
            <li>red border</li>
            <li>red border</li>
        </ul>
    </div>
</div>

现在，当我在JSFIDLE中运行它时，我看到每个元素周围都有一个红色边框。我想要实现的是从顶部元素中删除边框，并仅在div id=borders中的元素上使用它。我对CSS有点困惑，因为我试着使用code.borders ui li，但效果不好。。。我想这就是我们应该如何在网页上命名课程的方式？不管怎样，你能帮我删除顶部链接中的红色边框，只保留在包含“红色边框”的文字上吗

这是关于这个的JSFIDLE 谢谢

使用

#borders ul li

（因为

#

是一个

id

选择器，而不是

–

类

选择器），而不是

ul li

使用

#ul li

（因为

#

是

id

选择器，而不是

-

类

选择器），而不是

ul li

您的边框是一个ID，但您在CSS中将其称为类

尝试#borders而不是。borders

您的borders是一个ID，但您在CSS中将其称为类

---

尝试#borders而不是。borders

您也可以在此处使用一个类：

.li{
边框：1px纯红；
}

红边

您也可以在此处使用类：

.li{
边框：1px纯红；
}

红边

这是你想要的这是你想要的

body {
  padding-top: 2rem;
}
* {
  padding: 0; 
  margin: 0;
  box-sizing: border-box;
}
.nav {
    min-width:100% !important;
}
.nav ul {
  list-style: none;
  background-color: rgba(0,0,0,0.6);
  text-align: center;
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  min-width: 100%;
}
.nav li {
  font-size: 20px;
  line-height: 30px;
  height: 30px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #919191;
}

.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    font-size: 20px;
  line-height: 30px;
  height: 30px;
  }

  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
}

ul li { position: relative; border:1px solid red; display: inline-block; text-align: center;  }
ul { text-align:center; }