: привязка к последнему ребенку подменю

Question

В меню я применяю объявление последнего ребенка к { border: none;}. После этого мой SUBmenu не показывает границы даже с декларацией: {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