[英]CSS3 last-child selector - select last li with .has-dropdown but not li's within that
I am really struggling to get the last item in the dropdown to have rounded edges without the items within that having rounded corners too. 我真的很难使下拉列表中的最后一个项目具有圆角,而其中的项目也没有圆角。 I have tried many variations, but always end up with the same result which is that I get the last item to have rounded edges, but all the items within it have rounded edged too.
我尝试了许多变体,但总是最终得到相同的结果,即我得到的最后一个项目具有圆角边缘,但其中的所有项目也都具有圆角边缘。 Can anyone help me out?
谁能帮我吗? NB.
注意
id="languagebox"
won't always be the last item and so I cannot style using this ID. id="languagebox"
并不总是最后一项,因此我无法使用此ID进行样式设置。
Many thanks. 非常感谢。
CSS: 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 的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>
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;
}
ul.dropdown li.has-dropdown:last-child> a
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.