僞類上一個孩子

我試圖在我的菜單上使用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

僞類上一個孩子

回答

相關問題