给所有子元素添加内边距，除了最后一个。

Question

我试图在一个 div 的所有子元素中添加 padding，除了最后一个子元素。

我尝试使用 last-child 的否定形式，但是当我使用它时，甚至不会给其余的子元素添加 padding...

以下是我的HTML:

#container .description:not(:last-child) {
  padding-bottom: 10px;
}

<div id="container">
  <h3>Title</h3>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 1</div>
  </div>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 2</div>
  </div>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 2</div>
  </div>
  Testing here
</div>

JSFiddle演示

- imbondbaby

---

所有的.description元素都是它们父元素的:last-child；因此，您的选择器不会选择任何元素，因此也不会应用任何样式。 - David Thomas

如果您愿意更改您的标记：http://codepen.io/anon/pen/AEhFb - Jack

Answer 1

下面的规则应该是你要找的。它将向所有描述添加10像素的填充，除了最后一个.box元素中的描述:

#container .box:not(:last-child) .description{
    padding-bottom:10px;
}

示例代码

（此为示例代码链接）

- AlliterativeAlice

---

有没有办法我可以使用否定？就像我尝试过的那样？ - imbondbaby

@imbondbaby将答案更改为使用否定，但否定并不必要（除非您真的只想要一个规则）。 - AlliterativeAlice

非常感谢！那起作用了，我也知道怎么做了！我会在可以的时候接受这个答案。 - imbondbaby

最干净的解决方案 - 除非IE7/8是严格要求。E7和IE8仅支持这些CSS3选择器：一般兄弟姐妹（element1〜element2）和属性选择器[attr^=val]，[attr$=val]和[attr*=val] - CanIUse - Jack

Answer 2

你可能想要：

#container .description {
    padding-bottom: 10px;
}

#container > :last-child .description {
    padding-bottom: 0;
}

根据您目前的选择器：

#container .description:not(:last-child){
    padding-bottom:10px;
}

由于所有的.description元素都是其父元素的最后一个子元素，因此无法匹配任何元素。

针对评论提出的反应是使用否定运算符的复杂方法（并且跨浏览器兼容性有限）：

#container .box:not(:last-child) .description {
    padding-bottom: 10px;
}

- David Thomas

---

有没有办法我可以使用否定？就像我尝试过的那样？ - imbondbaby

你为什么要不必要地使用否定运算符呢？我的意思是：是的，当然有，但是“为什么”呢？ - David Thomas

Answer 3

使用:last-child怎么样呢？它更为简单，不需要用到否定选择器:not（相较于:first/last-child支持度更低）。

#container .box:last-child{
  padding-bottom: 0;
}

片段

#container {
  border: 1px solid
}

#container .box {
  padding-bottom: 10px
}

#container .box:last-child {
  padding-bottom: 0;
}

<div id="container">
  <h3>Title</h3>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 1</div>
  </div>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 2</div>
  </div>
  <div class="box">
    <div class="title">Description</div>
    <div class="description">Description 2</div>
  </div>
  Testing here
</div>

- dippas