1

我需要删除列表中第一项的左边框和第四项的右边框，而不会影响这些项的任何子列表。我怎样才能做到这一点？

我的菜单列表代码是：

<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 而不是 ul li a

我无法手动将类添加到最后一个孩子，因为它是动态出现的，所以我不知道管理员将来会添加多少项目

4

3 回答 3

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

请注意，直到 IE9，IE 才支持 last-child。第一个孩子应该在 IE7 及更高版本中工作。

于 2012-05-02T16:24:59.917 回答
1

试试这个

#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; color:#000; }

#menu > ul:first-child > li > a { border-left: 0px;} 

#menu > ul:last-child > li > a { border-right: 0px}
于 2012-07-19T12:50:51.780 回答
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 回答