html - 删除带有 :first-child :before 的边框

Question

我已经阅读了很多示例和片段，但我无法弄清楚如何解决这个问题。我有一个带有子列表的列表元素。然后我为所有这些元素设置了一个 border-top。我设法删除了第一个边框顶部，但它不起作用，即使是类也是如此。

这是代码。

    <ul>
        <li><a href="#">ABOUT OWSD</a></li>
        <li><a href="#">WHY OWSD</a>
            <ul>
                <li><a href="#">Objectives</a></li>
                <li><a href="#">Women and Gender</a></li>
                <li><a href="#">Success stories</a></li>
                <li><a href="#">Gender insite</a></li>
                <li><a href="#">Partners</a></li>
            </ul>
        </li>
        <li><a href="#">NETWORK</a></li>
        <li><a href="#">CAREER DEVELOPMENT</a></li>
        <li><a href="#">RESOURCES</a></li>
        <li><a href="#">RESOURCES</a></li>
    </ul>   
</nav>

---

nav a {
  display: block;
  text-decoration: none;
}



ul li a{
  position: relative;
  left: 0px;
  color: #1d5237;
  background-color: #1a1a1a;
  font-weight: 600;
  font-size: 16px;
  padding: 20px 0px 20px 20px;
  width: 100%;
}


ul li a::before{
  content: '';
  border-top: 1px solid #1d5237;
  position: absolute;
  top: 1px;
  width: 100%;
}


ul li a:hover,
ul li a:active,
ul li a:focus{
  color: #4a9367;  
}



li ul li a{
  position: relative;
  display: noe;
  left: 0px;
  color: #cccccc;
  background-color: #2a2a2a;
  font-weight: 400;
  font-size: 16px;
  padding: 18px 0px 18px 37px;
  width: 100%;
}


li ul li a::before{
  content: '';
  border-top: 1px solid #666666;
  position: absolute;
  top: 1px;
  width: 100%;  
}


li ul li a:hover,
li ul li a:active,
li ul li a:focus{
  color: #cccccc;
}

另外，我用 li ul li a 到达了我的第二个列表元素，这是正确的吗？有没有更好的写法？

Answer 1

尝试在你的 li ul li a:before 之后添加这个

li ul li:first-child a:before{
  content: '';
  border-top: 0;
  position: absolute;
  top: 1px;
  width: 100%;  
}