在表格菜单中的菜单项之间添加分隔符

我有一个使用表格创建的菜单（如果可能，请提供不需要我更改为列表或其他内容的答案...对此表示歉意）在表格菜单中的菜单项之间添加分隔符

无论如何，我想在每个菜单项之间添加一个分隔符，但所选项目除外。这意味着如果选择了一个菜单项我希望border-right不存在。请看看所附图片：

enter image description here

正如你所看到的，查询被选中;但是，知识菜单项的边界仍然可见。有什么办法可以消除这种情况吗？

目前的CSS如下：

div#nav a{ 
    color: #FFFFFF; 
    border-right: 1px solid red; 
} 

div#nav td.selected a{ 
    color: #004466; 
    border-right: none; 
}

HTML：

<div id="nav"> 
     <table id="navTable" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td><a href="Knowledge">Knowledge</a></td> 
      <td><a href="Enquiries">Enquiries</a></td> 
      <td><a href="Contact">Contact</a></td> 
     </tr> 
     </table> 
    </div>

是否有任何CSS技巧，这将有助于我在去除这就是该项目旁边的右边框'selected'菜单项？注意：如果有帮助，我也可以使用边框。

任何洞察将是非常有益的。谢谢！！

来源

2013-11-02 slovak_100

你可以用CSS3的之前和之后的伪类尝试http://coding.smashingmagazine.com/2011/07/13 /学习使用之前和之后的伪元素in-css/ – Mindbreaker

你试过CSS悬停？ – Nabil

@Mindbreaker不知道这是怎么回事。我会将:: after类应用于哪个元素？ –

这应该做的伎俩：

div#nav a { 
    border-left: 1px solid red; 
} 

div#nav td:first-child a, div#nav td.selected a, div#nav td.selected + td a { 
    border-left: none; 
}

见小提琴这里：http://jsfiddle.net/zitrusfrisch/WNTBH/

来源

2013-11-02 21:14:14

谢谢Daniel！这很棒，帮助解决了我需要的问题。谢谢 –

div#nav td { 
    color: #FFFFFF; 
    border-right: 1px solid red; 
} 

div#nav td.selected { 
    color: #004466; 
    border-right: none; 
}

来源

2013-11-02 20:36:48

谢谢你的建议，kozlovski5。不幸的是，这不起作用。我已经添加了html，也许我缺少表＃navTable？ –

尝试在您的第一条语句中删除逗号，检查我更新的代码，替换它并查看它是否有效 – 2013-11-02 21:02:17

不幸的是，这不起作用。 –

在表格菜单中的菜单项之间添加分隔符

回答

相关问题