Question

我在joomla中创建菜单（如果你不知道joomla，请不要担心这个问题与HTML-CSS有关）。

每个菜单之间都有分隔符(like "|")。

这是我的代码也适用于jsfiddle http://jsfiddle.net/WRuTC/

HTML

<div id="footerlinks">        <div class="module">
            <div>
                <div>
                    <div>
                                            <table width="100%" cellspacing="1" cellpadding="0" border="0"><tbody><tr><td nowrap="nowrap"><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=11">HOME</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=12">ABOUT WLB</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=13">KEY PERSONNEL</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=14">CAPABILITIES</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=15">PROJECTS</a><a class="mainlevel" href="/Parthvi/joomla/WLB/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=16">CONTACT US</a></td></tr></tbody></table>                    </div>
                </div>
            </div>
        </div>

               </div>

CSS

    #footerlinks .module td a {
    border-right: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}

现在，问题是这个css把分隔符放在菜单的右边，而我不想要最后一个分隔符（不想要最右边的分隔符）我怎么样？任何css选择器？

Answer 1

您应该设置第一个td:first-child

:first-child适用于所有浏览器！

#footerlinks .module td a {
    border-left: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}
#footerlinks .module td a:first-child {
    border-left: 0px solid #79797A;

}

fiddle sample

Answer 2

 #footerlinks .module td a:last-child{border:0}

但它不会在ie＆lt; 8中起作用。如果你想要支持ie7在左边放置边框然后

 #footerlinks .module td a:first-child{border:0}

如果你想支持ie6，你必须添加类或样式到最后（你可以使用eq.jQuery来修复它）。

Answer 3

您可以使用CSS3的last-child声明定位菜单上的最后一项，如下所示：

#footerlinks .module td a:last-child {
    border-right:none;
}

当然，旧浏览器不支持这种情况，在这种情况下，您只需定位菜单项类并从那里删除边框。您可以查看页面的来源，并查看joomla为该菜单项自动添加的类，例如第24项，第23项等等，只需这样做：

#footerlinks .module td .item-24 {
    border-right:none;
}

Answer 4

从#footerlinks .module td a移除边框并添加此

#footerlinks .module td a + a { border-left:1px solid #79797A; }

Answer 5

#footerlinks .module td a:last-child {
   border-right: 0;
}

Answer 6

       #footerlinks .module td a {
    border-left: 1px solid #79797A;
    color: #515152;
    font-size: 11px;
    line-height: 42px !important;
    padding-left: 7px;
    padding-right: 7px;
    text-decoration: none;
}
#footerlinks .module td a.first-child {
    border-left: none;

}

从菜单中删除最后一个分隔

6 个答案: