選擇CSS3最後一個孩子在下拉菜單不工作

Question

令人沮喪地無法解決CSS3僞元素的'最後一個孩子'，不適用於我們目前正在處理的這個自定義下拉導航菜單。

每個下拉菜單都可以分配多個列，在這種情況下，我希望將右邊框應用於div .dropdown_3列中的每個列（.col_1）。

CSS代碼段

.dropdown_1column_simple {width: 100px;} 
.dropdown_2column_simple {width: 155px;} 
.dropdown_1column {width: 550px;} 
.dropdown_2column {width: 650px;} 
.dropdown_3column {width: 500px;} 
.dropdown_4column {width: 800px;} 
.dropdown_5column {width: 1000px;} 

.dropdown_2column_simple .col_1 {width:155px;} 
.dropdown_2column_simple .col_2 {width:155px;} 
.col_1 {width:145px; border-right: 1px solid #888;} 
.col_2 {width:240px;} 
.col_3 {width:490px;} 
.col_4 {width:440px;} 
.col_5 {width:575px;} 
.col_s {width:250px;} 

.col_1,.col_2,.col_3,.col_4,.col_5 { 
display:inline; 
float: left; 
position: relative; 
margin-left: 5px; 
margin-right: 5px; 
/*border: 1px solid #000;*/ 
} 

HTML摘錄

<div class="dropdown_3column align_left "> 
<div class="col_3"> 
    <div class="content_top"></div> 
</div> 
<div class="col_1"> 
    <ul> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/addict-clothing.html"> 
    <span class="level1">Addict Clothing </span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/atticus-clothing.html"> 
    <span class="level1">Atticus Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/dephect-clothing.html"> 
    <span class="level1">Dephect Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/dickies-clothing.html"> 
    <span class="level1">Dickies</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/dta-clothing.html"> 
    <span class="level1">DTA Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/famous-stars-and-straps-clothing.html"> 
    <span class="level1">Famous Stars And Straps Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/fuct-clothing.html"> 
    <span class="level1">FUCT Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/hex-accessories.html"> 
    <span class="level1">HEX Accessories</span> 
    </a> 
    </li> 
</ul> 
</div> 
<div class="col_1"> 
<ul> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/the-hundreds.html"> 
    <span class="level1">The Hundreds</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/insight-clothing.html"> 
    <span class="level1">Insight Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/jeepney-clothing.html"> 
    <span class="level1">Jeepney Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/king-apparel.html"> 
    <span class="level1">King Apparel</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/lrg-clothing.html"> 
    <span class="level1">LRG Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/my-yard-clothing.html"> 
    <span class="level1">My Yard</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/new-era-5950.html"> 
    <span class="level1">New Era 5950 Hats and Apparel</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/pxl-clothing.html"> 
    <span class="level1">PXL Clothing</span> 
    </a> 
    </li> 
</ul> 
</div> 
<div class="col_1"> 
<ul> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/rebel8-clothing.html"> 
    <span class="level1">REBEL8 Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/ringspun-clothing.html"> 
    <span class="level1">Ringspun</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/rogue-status-clothing.html"> 
    <span class="level1">Rogue Status </span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/the-wild-ones-clothing.html"> 
    <span class="level1">The Wild Ones</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/volcom-clothing.html"> 
    <span class="level1">Volcom Clothing</span> 
    </a> 
    </li> 
    <li class="level1"> 
    <a href="http://009rep.clubnetdev.com/brands/zoo-york-clothing.html"> 
    <span class="level1">Zoo York Clothing</span> 
    </a> 
    </li> 
</ul> 
</div> 
<div class="col_3"> 
<div class="content_bottom"></div> 
</div> 
<div class="col_s"> 
<div class="content_side"></div> 
</div> 
</div> 

問題的真人版可以看出here。這是有問題的「品牌」下拉列表中，我試圖從第三個（最後一個）欄中刪除右手邊。

我知道瀏覽器不兼容和使用JS/jQuery的其他替代方法可能存在，但我只是試圖用CSS來解決這個問題。

我在想也許這需要一雙新鮮的眼睛，因爲我已經嘗試過大量的變化，並沒有設法選擇最後一列，我相信下拉下來。

在此先感謝。

編輯：我試圖噸的變化，但我認爲這個問題是我無法計算父項的最後一個孩子，不計其他divs。我一直在嘗試的喜歡：

div:last-child .col_1 {border-right: none !important;} 

謝謝。

編輯2：請在JS Fiddle找到我的問題的實例，如果它可以幫助任何人。

謝謝。

Answer 1

您沒有正確使用選擇器。 下面是一個使用第n個孩子的修復： http://jsfiddle.net/BUhgZ/3/