伪类上一个孩子

我试图在我的菜单上使用border-right实现分隔符效果。这里是我的css代码伪类上一个孩子

ul.navigation li a { 
text-decoration:none; 
float:left; 
width:252px; 
height:50px; 
display:block; 
background-color:#ccc; 
text-align:center; 
line-height:45px; 
color:#000; 
position:relative; 
border-right:1px solid #333; 
} 

ul.navigation li a:last-child { 
border:none; 
}

我在做什么错了？我也试过border-left和:first-child。

来源

2013-02-16 Jeremi Liwanag

你似乎很困惑在这里。你在标题中说最后一个孩子，但是在你的代码中使用'：first-child'，并且用所有CSS版本标记你的问题... – BoltClock 2013-02-16 16:49:04

哪些浏览器？不是每个浏览器都支持'：first-child'。 – 2013-02-16 16:49:13

@BoltClock我需要和你谈谈，你可以让我聊天吗？ – 2013-02-16 16:51:21

我想你的意思是要做到这一点

ul.navigation li:first-child a

因为每个a是其父li的第一个孩子。您的意思是第一个li项目中的a。 :)

来源

2013-02-16 16:54:10

非常感谢，它的工作。希望成为像你们这样的职业球员。 – 2013-02-16 16:59:35

您的CSS片段充满了不良做法。

下面是一个如何设置样式以及如何在每个列表项之间添加分隔符的示例。

.navigation { overflow: hidden; } /* Explanation 1 */ 
.navigation li { float: left; } 

.navigation li + li {    /* Explanation 2 */ 
    border-left: 1px solid #333; 
} 

.navigation li a { 
    display: block; 
    width: 252px;     /* Explanation 3 */ 
    padding: 5px 0;     /* Explanation 4 */ 

    background-color:#ccc; 
    color:#000; 
    text-align:center;    
}

浮动遏制：read this article。
在这里，我回答你的问题：使用adiacent兄弟选择器+从第二个li应用一个边框到最后一个。
您确定要固定宽度吗？
没有固定的高度和行高来垂直对齐文本。顺便提一下，line-height并不需要一个单位。 Read this article。

这是一个活生生的例子：http://dabblet.com/gist/4968063

来源

2013-02-16 18:01:45

我也从中学到了很多。在编码css和html时，我有很多不好的做法。有没有一个网站会教导如何消除不良行为？另外，“ul.navigation li：first-child a”是一种不好的做法吗？我应该开始使用相邻的兄弟选择器+。 – 2013-02-16 18:58:04

我很乐意提供帮助。 'ul.navigation li：第一个孩子a'本身并不是一个坏习惯，它就好。我建议你加入Freenode的#css支持频道http://webchat.freenode.net/?channels=css有很多人准备好帮助你。 – 2013-02-16 20:31:11

伪类上一个孩子

回答

相关问题