上一個孩子CSS3

我需要從列表中的第一個項目和右邊界刪除第四個項目，而不影響這些項目的任何子列表。我怎樣才能做到這一點？上一個孩子CSS3

我的菜單列表代碼：

<div id="menu"> 
    <ul><li><a href="#">First Item</a><ul> 
    <li><a href="#">First Sub Item</a></li> 
    <li><a href="#">Second Sub Item</a></li> 
    </ul></li></ul> 

    <ul> 
    <li><a href="#">Second Item</a> 
     <ul> 
     <li><a href="#">First Sub Item</a></li> 
     <li><a href="#">Second Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 

    <ul> 
    <li><a href="#">Third Item</a> 
     <ul> 
     <li><a href="#">First Sub Item</a></li> 
     <li><a href="#">Second Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 

    <ul> 
    <li><a href="#">Fourth Item</a> 
     <ul> 
     <li><a href="#">First Sub Item</a></li> 
     <li><a href="#">Second Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 
</div>

這是我的代碼添加邊框與

#menu ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; }

，我用這個代碼從第一個孩子刪除邊界

#menu ul:first-child a { border-left: 0px; }

它可以很好地工作，但是當我同樣從最後一個孩子中刪除時，它會影響子項目ul li ul li一個不符合UL李一

我不能手動添加類最後一個孩子，因爲它涉及動態，所以我不知道管理員將有多少項目在未來增加

來源

2012-05-02 Nasser

哪裏是你的CSS？ – BoltClock

對這個問題有一些CSS可以讓我們找出哪些元素具有邊界，所以我們可以提供幫助。 – frontendzzzguy

@ user1370371請提供CSS，我們將能夠給出並解釋實際的工作代碼，而不是猜測您正在解決的問題。 – sg3s

第一項：

#menu ul:first-child

最後：

#menu ul:last-child

對於全瀏覽器的兼容性，加nother class到第一個和最後一個元素

<ul class="first-list"> 
    <li><a href="#">First Item</a><ul> 
    <li><a href="#">First Sub Item</a></li> 
    <li><a href="#">Second Sub Item</a></li> 
    </ul></li></ul> 

    <ul> 
    <li><a href="#">Second Item</a> 
     ... 

    <ul class="last-list"> 
    <li><a href="#">Fourth Item</a> 
     <ul> 
     <li><a href="#">First Sub Item</a></li> 
     <li><a href="#">Second Sub Item</a></li> 
     </ul> 
    </li> 
    </ul> 

.first-list {} 
.last-list {}

大多數語言都支持用於查詢或數組中第一個和最後一個條目的檢測器。

如果你使用jQuery，你可以選擇像這樣：

$('#menu ul:first').addClass('first-list')

來源

2012-05-02 16:24:15

#menu ul:first-child { border-left: 0; } 
#menu ul:last-child { border-right: 0; }

注意，最後子女不支持IE，直到IE9。第一個孩子應該在IE7以上工作。

來源

2012-05-02 16:24:59

試試這個

#menu ul li a { padding: 10px; display: inline-block; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #000; color:#000; } 

#menu > ul:first-child > li > a { border-left: 0px;} 

#menu > ul:last-child > li > a { border-right: 0px}

來源

2012-07-19 12:50:51

上一個孩子CSS3

回答

相關問題