2014-10-30 183 views
0

我真的很努力讓下拉菜單中的最後一項具有圓角邊緣,而沒有圓角的項目也是如此。我已經嘗試了很多變化,但總是以相同的結果結束,即我得到的最後一個項目具有圓角邊緣,但其中的所有項目也都變圓了。誰能幫我嗎? NB。 id="languagebox"並不總是最後一項,所以我不能使用此ID的樣式。CSS3最後一個孩子選擇器 - 選擇最後一個li,其中包含.has-dropdown,但不包括那個裏面的

非常感謝。

CSS:

ul.dropdown li.has-dropdown:last-child a { 
    border-radius: 0px 0px 3px 3px; 
    -moz-border-radius: 0px 0px 3px 3px; 
    -webkit-border-radius: 0px 0px 3px 3px; 
    border: 1px solid red; 
} 

HTML

<a href="#"><i class="fi-web medium"></i></a> 
<ul class="dropdown"> 
    <li class="title back js-generated"> 
    <h5><a href="#">Back</a></h5></li> 
    <li class="has-dropdown" id="display_currency"><a>Currency</a> 
    <ul class="dropdown"> 
     <li class="title back js-generated"> 
     <h5><a href="#">Back</a></h5></li> 
     <li class="lang_item active"> 
     <a href="javascript:void(0);"><img src="//d11fdyfhxcs9cr.cloudfront.net/flags/USD_flag.gif" alt="USD"> USD</a> 
     </li> 
     <li class="lang_item"> 
     <a href="javascript:void(0);" onclick="SetStoreCurrency('ZAR')"><img src="//d11fdyfhxcs9cr.cloudfront.net/flags/ZAR_flag.gif" alt="ZAR"> ZAR</a> 
     </li> 
    </ul> 
    </li> 

    <li class="has-dropdown" id="languagebox"><a>Language</a> 
    <ul class="dropdown"> 
     <li class="title back js-generated"> 
     <h5><a href="#">Back</a></h5></li> 
     <li class="lang_item active"> 
     <a href="javascript:void(0);"><img src="//d11fdyfhxcs9cr.cloudfront.net/design_media/flags/large/usd.png" alt="Default Language Pack (us-en)" height="13" width="22"> English</a> 
     </li> 
     <li class="lang_item"> 
     <a href="javascript:void(0);" onclick="javascript:SetLanguage(285679);"><img src="//d11fdyfhxcs9cr.cloudfront.net/design_media/flags/large/fra.png" alt="French" height="13" width="22"> French</a> 
     </li> 
    </ul> 
    </li> 
</ul> 
+0

使用_child combinator_代替的_adjacent兄弟combinator_具體ta僅在第一個「級別」上設置您的元素。 – CBroe 2014-10-30 14:36:23

+0

@CBroe - 他沒有使用相鄰的選擇器*。那將是「+」。他使用* General後代選擇器*,是的,應該使用* child *來代替。 – LcSalazar 2014-10-30 15:23:36

+0

@LcSalazar:你說得對,我的不好。 – CBroe 2014-10-30 16:26:22

回答

1
ul.dropdown>li:last-child{ 
    border-radius: 0px 0px 3px 3px; 
    -moz-border-radius: 0px 0px 3px 3px; 
    -webkit-border-radius: 0px 0px 3px 3px; 
    border:1px solid red; 
} 
0

ul.dropdown li.has-下拉:最後的孩子>一

相關問題