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>