Question

我已经阅读了很多示例和片段，但我无法弄清楚如何解决这个问题。我有一个带有子列表的列表元素。然后我有一个所有这些元素的边框顶部。我正在设法删除第一个边框顶部，但它不起作用，甚至没有类。

这是代码。

    <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:first-child a:before{
  content: '';
  border-top: 0;
  position: absolute;
  top: 1px;
  width: 100%;  
}

Answer 2

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

以下是代码的工作示例

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢

删除边框：first-child：before

2 个答案: