为什么我的最后一个跨度打破了我的 :后造型

Question

我在每个列表项（最后一个项目除外）后添加•。这工作得很好，直到我在<span class="more-brands">末尾又增加了一个跨度。现在我的最后一个品牌项目也有•.怎么来了？看我的小提琴。

<div class="brand-list">
    <span class="brand">Haaning and Htoon</span>
    <span class="brand">Alexander McQueen</span>
    <span class="brand">Alexander Wang</span> 
    + <span class="more-brands">39</span> more brands                           
</div>

// All except the last span with class name 'brand'
.brand:not(:last-child):after {
    content: "•";
    display: inline-block;
    font-size: 20px;
    padding: 0 5px;
    position: relative;
    text-align: center;
    top: 3px;    
}

Answer 1

不幸的是，当前的CSS没有"具有特定类的最后一个元素"的选择器。 .brand:not(:last-child) 表示"具有不是其父级的最后一个子级的类brand元素"，并且类brand的所有span都符合此条件。

如果您的目标是在类brand的span之间插入•字符，那么将它们插入除第一个之外的每个span.brand之前不是更合适吗？

/* All spans with class name 'brand' except the first one*/
.brand + .brand:before {
    content: "•";
    display: inline-block;
    font-size: 20px;
    padding: 0 5px 0 2px;
    position: relative;
    text-align: center;
    top: 3px;    
}

<div class="brand-list">
    <span class="brand">Haaning and Htoon</span>
    <span class="brand">Alexander McQueen</span>
    <span class="brand">Alexander Wang</span> 
    + <span class="more-brands">39</span> more brands                           
</div>

作为奖励，这将在IE8中工作（它不识别CSS3选择器，如:not()和:nth-last-*）

Answer 2

:last-child选择父级中的最后一个子项。父元素中的最后一个子元素是 .more-brands 元素。您的.brand元素都不是:last-child.

要解决此问题，您可以删除"39"周围的span元素，或者使用其他元素并改用:last-of-type选择器。

.brand:not(:last-of-type):after {
    content: "•";
    display: inline-block;
    font-size: 20px;
    padding: 0 5px;
    position: relative;
    text-align: center;
    top: 3px;    
}

<div class="brand-list">
    <span class="brand">Haaning and Htoon</span>
    <span class="brand">Alexander McQueen</span>
    <span class="brand">Alexander Wang</span> 
    + 39 more brands                           
</div>
<p>Or:</p>
<div class="brand-list">
    <span class="brand">Haaning and Htoon</span>
    <span class="brand">Alexander McQueen</span>
    <span class="brand">Alexander Wang</span> 
    + <i>39</i> more brands                           
</div>

:last-of-type在这里工作，因为此选择器选择某种类型的最后一个元素（例如 span）。

Answer 3

您正在使用after并且使用not最后一个span没有符号•但您想排除最后两个span：

.brand-list {
  width: 400px;
  font-size: 0.9rem;
  margin-top: 5px;
}
.brand {
  color: #557486;
}
.brand-list span:not(:nth-last-child(-n+2)):after {
  content: "•";
  display: inline-block;
  font-size: 20px;
  padding: 0 5px;
  position: relative;
  text-align: center;
  top: 3px;
}

<div class="brand-list">
  <span class="brand">Haaning and Htoon</span>
  <span class="brand">J. Lindeberg</span>
  <span class="brand">7 for all Mankind</span>
  <span class="brand">Alexander McQueen</span>
  <span class="brand">Alexander Wang</span> + <span class="more-brands">39</span> more brands
</div>