使用 :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%;  
}

Answer 2

我在您的 css 代码中评论了不需要的行。（抱歉，评论的背景颜色不可见）

这是您的代码的工作示例

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

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

谢谢

使用 :first-child :before 删除边框

Remove border with :first-child :before

html

css

css-selectors