CSS：选择指定深度的最后一个元素（两级菜单栏）

Question

我有一个多级菜单：菜单行+某些项目可能有一个下拉列表。 菜单行中的项目用'|'分隔显然最后一个项目不应该有边界

问题是last-child这里捕获最后一个下拉列表中的最后一个项目，我需要捕获菜单行项目（item3）。

result

/* MENU */ 
 

 
div.menu { 
 
    display: inline; 
 
} 
 
div.menu a { 
 
    padding-left: 0.5em; 
 
    padding-right: 0.5em; 
 
    border-right: 1px solid lightgrey; 
 
    font-size: 12pt; 
 
} 
 
div.menu a:last-child { 
 
    border-right: 0px; 
 
} 
 
/*DROP DOWN*/ 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline; 
 
} 
 
.dropdown_content { 
 
    display: none; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 1em; 
 
    right: 0; 
 
    background-color: #f9f9f9; 
 
    white-space: nowrap; 
 
    border-bottom: 1px solid lightgrey; 
 
} 
 
.dropdown_content a { 
 
    padding: 0.2em; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown:hover .dropdown_content { 
 
    display: block; 
 
}

<div class="menu"> 
 
    <a href="">Item1</a> 
 
    <a href="">Item2</a> 
 
    <div class="dropdown"> 
 
    <a class="dropbtn">Item3</a> 
 
    <div class="dropdown_content"> 
 
     <a href="">Subitem1</a> 
 
     <a href="">Subitem2</a> 
 
    </div> 
 
    </div> 
 
</div>

我需要纯CSS解决方案，请没有JS
应该在IE11
工作，我猜想，也许菜单HTML结构不理想太..所以也许一些不同的结构会自动解决问题。

提前致谢！ :)

Answer 1

将:last-child条件赋予div元素。因为你的最后一个锚点在最后一个div下面。 >代表直系孩子。

/* MENU */ 
 

 
div.menu { 
 
    display: inline; 
 
} 
 
div.menu a { 
 
    padding-left: 0.5em; 
 
    padding-right: 0.5em; 
 
    border-right: 1px solid lightgrey; 
 
    font-size: 12pt; 
 
} 
 
div.menu > div:last-child > a { 
 
    border-right: 0px; 
 
} 
 
/*DROP DOWN*/ 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline; 
 
} 
 
.dropdown_content { 
 
    display: none; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 1em; 
 
    right: 0; 
 
    background-color: #f9f9f9; 
 
    white-space: nowrap; 
 
    border-bottom: 1px solid lightgrey; 
 
} 
 
.dropdown_content a { 
 
    padding: 0.2em; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown:hover .dropdown_content { 
 
    display: block; 
 
}

<div class="menu"> 
 
    <a href="">Item1</a> 
 
    <a href="">Item2</a> 
 
    <div class="dropdown"> 
 
    <a class="dropbtn">Item3</a> 
 
    <div class="dropdown_content"> 
 
     <a href="">Subitem1</a> 
 
     <a href="">Subitem2</a> 
 
    </div> 
 
    </div> 
 
</div>