选择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/