Question

我正在尝试将padding添加到div的所有子元素（最后一个除外）。

我尝试使用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 Demo

Answer 1

以下规则应该是您正在寻找的内容。除了上一个.box元素中的那个之外，它将为所有描述添加10px的填充：

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

Example fiddle

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;
}

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>

添加填充到除最后一个之外的所有子级

3 个答案:

段