0

イライラすることに、現在取り組んでいるこのカスタム ドロップダウン ナビゲーション メニューで動作しない CSS3 疑似要素「last-child」を解決できませんでした。

各ドロップダウン メニューには多数の列を割り当てることができます。この例では、div .dropdown_3column 内の各列 (.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>

問題のライブ バージョンは、ここで見ることができます。3 番目 (最後) の列から右側の境界線を削除しようとしているのは、問題の「ブランド」ドロップダウンです。

おそらく存在するJS / jQueryを使用したブラウザーの非互換性やその他の代替手段を認識していますが、CSSでこれを解決しようとすることにのみ興味があります。

たくさんのバリエーションを試しましたが、そのドロップダウン内の最後の列を選択できなかったので、これにはおそらく新鮮な目が必要だと思います.

前もって感謝します。

編集:私はたくさんのバリエーションを試みましたが、問題は、他のdivもカウントしない親アイテムの最後の子を解決できないことだと思います. 私は次のようなものを試してきました:

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

ありがとう。

EDIT 2:誰かに役立つ場合は、 JS Fiddleでも私の問題のインスタンスを見つけてください。

ありがとう。

4

1 に答える 1

0

セレクターを正しく使用していません。nth-child を使用した修正は次のとおりです: http://jsfiddle.net/BUhgZ/3/

于 2012-04-23T16:47:07.400 に答える