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

Question

我有以下 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>

然后我有了一个 css 文件:

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

现在，当我在 jsfiddle 中运行它时，我看到每个元素周围都有一个红色边框。我想要实现的是从顶部元素中删除边框，并仅在 div id = borders 中的元素上使用它。我对 CSS 有点困惑，因为我尝试使用代码 .borders ui li ，但效果不佳……我认为这就是我们应该如何调用网页上的类的方式？不管怎样，你能帮我去掉顶部链接的红色边框，只把它留在包含“红色边框”的词上吗？

这是 http://jsfiddle.net/gfkPG/451/ 的 jsfiddle谢谢!

Answer 1

使用 #borders ul li(因为 # 是一个 id 选择器，而不是 。 – class 选择器)而不是 ul li。

JSFiddle