在下拉菜单中选择CSS3最后一个子项不工作

在下拉菜单中选择CSS3最后一个子项不工作,css,pseudo-class,css-selectors,Css,Pseudo Class,Css Selectors,令人沮丧的是,我们无法解析CSS3伪元素“last child”,该元素不适用于我们目前正在使用的自定义下拉导航菜单 每个下拉菜单都可以指定若干列,在本例中,我希望对div.dropdown_3列中的每一列(.col_1)应用右边框 CSS片段 .dropdown_1column_simple {width: 100px;} .dropdown_2column_simple {width: 155px;} .dropdown_1column {width: 550px;} .dropdown_2

令人沮丧的是,我们无法解析CSS3伪元素“last child”,该元素不适用于我们目前正在使用的自定义下拉导航菜单

每个下拉菜单都可以指定若干列,在本例中,我希望对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>
谢谢

编辑2:如果我的问题对任何人都有帮助,请在上面找到我的问题的实例


谢谢。

您没有正确使用选择器。 下面是使用第n个子项的修复:

:最后一个子级是伪类,而不是伪元素。另外,
:last child
始终选择最后一个孩子,而不是某类的最后一个孩子。感谢您更正标记。我明白了,可以选择div class=“col_1”的最后一个实例吗在一个父div中,然后使用这个伪类?嗯。很有趣-可以解释我是如何浪费了两个小时的大部分时间而没有提出解决方案的:/在我看来,你可以先改进一下菜单结构。可能是第三方Magento扩展。我是在补充,而不是全部重写。
div:last-child .col_1 {border-right: none !important;}