html - 删除 CSS 中第一个孩子的上边框和最后一个孩子的下边框

Question

我有以下 HTML：

<ul>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FOURTH</li>
<ul>

以及以下 CSS：

li
{
 border-top:1px solid #FFF;
 border-bottom: 1px solid #D0D0D0;       
}

如何删除第一个 LI 元素的上边框和最后一个 LI 元素的下边框？</p>

score 29 · Accepted Answer

29

li:first-child {
  border-top: none;
}
li:last-child {
  border-bottom: none;
}

就这样。

于 2012-06-15T17:01:28.210 回答

score 2 · Accepted Answer

使用 CSS:not选择器仅在需要时应用样式，而不是添加然后删除它们。

例如，

body {
  background: #acc;
}

li:not(:first-child) {
  border-top: 1px solid #fff;
}

li:not(:last-child) {
  border-bottom: 1px solid #000;
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>

2 回答 2