删除边框:first-child:before

时间:2015-03-31 16:02:33

标签: html css css-selectors

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

这是代码。

    <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到达我的第二个列表元素这是正确的吗?有没有更好的方法来写它?

2 个答案:

答案 0 :(得分:1)

尝试在

  • 之后添加:

    li ul li:first-child a:before{
      content: '';
      border-top: 0;
      position: absolute;
      top: 1px;
      width: 100%;  
    }
    
  • 答案 1 :(得分:0)

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

    以下是代码的工作示例

    &#13;
    &#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;
    &#13;
    &#13;

    谢谢