1

これらのアイテムのサブリストに影響を与えずに、リストの最初のアイテムから左境界線を削除し、4 番目のアイテムから右境界線を削除する必要があります。これどうやってするの？

メニューリストの私のコードは次のとおりです。

<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 a not ul li a に影響します

クラスは動的に追加されるため、最後の子に手動で追加することはできないため、管理者が将来追加するアイテムの数がわからない

4

3 に答える 3

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

最後の子はIE9までIEでサポートされていないことに注意してください。ファーストチャイルドはIE7以降で動作する必要があります。

于 2012-05-02T16:24:59.917 に答える
0

最初のアイテム：

#menu ul:first-child

最後のアイテム：

#menu ul:last-child

ブラウザと完全に互換性を持たせるには、最初と最後の要素に別のクラスを追加します

 <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-02T16:24:15.847 に答える