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

Answer 2

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

尝试 #borders 而不是 .borders 。

Answer 3

您也可以在这里使用课程：

＆＃13;

.borders ul li {
    border:1px solid red;
}

＆＃13;

	<div class="borders">
	    <ul>
            <li>red border</li>
        </ul>
    </div>

＆＃13;

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

3 个答案: