Question

我有这些分组，每个分组应该有一个底部的1px红色边框。这些分组可能有未知数量。但是，最后一个分组不应该有一个底部边框。 CSS sytax应该如何实现这一目标？

＆＃13;

dl>.price-list:not(last-child) {
  border-bottom: 1px solid red;
}

＆＃13;

<dl>
  <div class="price-list">
    <dt>Tuition</dt>
    <dd>$10</dd>
  </div>
</dl>

<dl>
  <div class="price-list">
    <dt>Tuition</dt>
    <dd>$10</dd>
  </div>
</dl>

＆＃13;

Answer 1

如果没有看到您尝试的代码，很难看出出现了什么问题。我怀疑你试过不是最后一个孩子，但是当这个列表（另一个tagName）之后还有其他项目时，这将无效。请改用:last-of-type。

在您的编辑之后：首先，您在last-child之前忘记了冒号。其次，您选择的是最后一个.price-list子项，但在您的HTML中，每个dl只有一个此类项目。您可能尝试选择除最后dl个项目之外的所有项目，而不是.price-list。

dl:not(:last-of-type) {
  border-bottom: 1px solid red;
}

<dl>
  <div class="price-list">
    <dt>Tuition</dt>
    <dd>$10</dd>
  </div>
</dl>

<dl>
  <div class="price-list">
    <dt>Tuition</dt>
    <dd>$10</dd>
  </div>
</dl>
<dl>
  <div class="price-list">
    <dt>Tuition</dt>
    <dd>$10</dd>
  </div>
</dl>

<dl>
  <div class="price-list">
    <dt>Tuition</dt>
    <dd>$10</dd>
  </div>
</dl>
<dl>
  <div class="price-list">
    <dt>Tuition</dt>
    <dd>$10</dd>
  </div>
</dl>

<dl>
  <div class="price-list">
    <dt>Tuition</dt>
    <dd>$10</dd>
  </div>
</dl>

Answer 2

试试这段代码，它应该做的工作：

.price-list {
    border-bottom: 1px solid red;
}
.price-list:last-child {
    border-bottom: none
}

CSS不是最后一个孩子 - 无法删除最后一个分组的边框

2 个答案: