2

我想用类名为我的最后一个 ul 元素添加不同的样式footer_list，但以下所有操作都不起作用

ul.footer_list:last-child {
    border-right: none;
}

#menu-bottom.pads ul.footer_list:last-child {
    border-right: none;
}

结构如下

<div class="pads clearfix" id="menu-bottom">
    <ul class="footer_list">
        <li><a title="" href=""></a></li>
    </ul>

    <ul class="footer_list">
        <li><a title="Zu den Dell Gutschein Codes" href="/dell-gutschein-codes/"></a></li>
    </ul>
    <ul class="footer_list">
        <div class="menu-footer-container">
            <ul class="menu" id="menu-footer">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25" id="menu-item-25"><a href=""></a></li>
            </ul>
        </div>
    </ul>
</div>
4

5 回答 5

4

你也可以使用 last-of-type 伪选择器。

.footer_list:last-of-type {
    border-right: none;
}
于 2013-01-25T11:46:05.443 回答
2

您使用了错误的选择器。而不是：

ul.footer_list:last-child {
    border-right: none;
}

它应该是：

.footer_list:last-child {
    border-right: none;
}

有关查看选择器正常工作的示例：http: //jsfiddle.net/kDhS8/

于 2013-01-25T11:36:07.513 回答
0

这行得通！( http://jsfiddle.net/NJcVE/1/ )

.footer_list:last-child {border-right: none; }

对于 IE7/8，您可以添加一个类到您想要的最后一个 ul。示例：CSS：

.lt-ie9 .last-child {border-right: none;}

查询：

/* LAST CHILD HACK FOR IE7/8 */
$(function(){
    if( $.browser.msie ){
     if( $.browser.version == 7.0 || $.browser.version == 8.0 ){
        $('.footer_list').each(function(){
            if( $(this).is(':last-child') ){
                $(this).addClass('last-child');
            }       
        });
     } 
});
于 2013-01-25T11:37:51.803 回答
0

当你使用last-child时，这意味着你ul所有的lis 都是孩子，所以你必须统一你ul的，最后一个li是你的last-child，像这样：

CSS：

.footer_list li{
    border: 1px solid #000;
}
.footer_list li:last-child {
    border: none;
}

HTML：

<ul class="footer_list">
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
</ul>
于 2013-01-25T11:45:03.063 回答
-1

你可以使用这个

#menu-bottom ul:last-child  {
    //css for Last ul tag
}
于 2013-01-25T11:33:34.320 回答