：最后一个孩子的边界影响子菜单

Question

在菜单中，我将最后一个孩子的申报应用于{ border: none;}。之后，我的子菜单即使声明也不显示边框：{border-bottom: 1px solid black;}任何想法为什么我的第二个声明不起作用？ FIDDLE

P.S我想通了，当我改变ul.topmenu ....到ul .... everthing完美的作品。但我仍然需要有能力使用我的班级名称。

/************QUESTION ZONE**************/ 
 

 
ul li a { 
 
    border-bottom: 1px solid black; 
 
} 
 

 
ul.topmenu li:last-child a { 
 
    border: none; 
 
} 
 

 
ul.secondsubmenu li a { 
 
    border-bottom: 1px solid black; 
 
} 
 

 
/**********end question********/ 
 

 
ul, li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
ul { 
 
    height: 2em; 
 
    background: yellow; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    line-height: 2em; 
 
    width: 6em; 
 
    text-align: center; 
 
} 
 

 
ul.submenu, ul.secondsubmenu { 
 
    height: auto; 
 
} 
 

 
ul.submenu li { 
 
    float: none; 
 
} 
 

 
ul.secondsubmenu { 
 
    background: yellow; 
 
    color: white; 
 
    height: auto; 
 
    position: absolute; 
 
    left: 12.6em; 
 
    top: 6.9em; 
 
    margin-left: 1px; 
 
}

<nav> 
 
    <ul class="topmenu"> 
 
     <li><a href="#">!</a> 
 
     <li><a href="#">!!</a> 
 
      <ul class="submenu"> 
 
       <li><a href="#">111</a> 
 
       <li><a href="#">222</a> 
 
       <li><a href="#">333</a> 
 
        <ul class="secondsubmenu"> 
 
         <li><a href="#">1</a></li> 
 
         <li><a href="#">1</a></li> 
 
         <li><a href="#">1</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">222</a> 
 
    </ul> 
 
</nav>

Answer 1

因为ul.topmenu li:last-child a更为具体，并且所有子菜单中的a标签（属于最后li）将被此规则

改变你的第二个匹配规则到

ul.topmenu .secondsubmenu li a { 
    border-bottom: 1px solid black; 
} 

将http://specificity.keegan.st/中的两条规则理解为它们的特殊性。

Answer 2

改变这种

ul.topmenu li:last-child a { 
    border: none; 
} 

这个

ul.topmenu > li:last-child a { 
    border: none; 
} 

当您添加这个符号>这意味着只有第一部儿童

example