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

Question

我在除最后一项之外的每个列表项之后添加 •。这工作得很好，直到我在末尾再添加一个跨度 <span class="more-brands">。现在我的最后一件品牌商品也有 •。怎么来的？ See my fiddle.

<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

:last-child 选择父项中的最后一个子项。父项中的最后一个子项是您的 .more-brands 元素。 None 个 .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 2

您正在使用 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>

Answer 3

不幸的是，当前 CSS 没有 "the last element with certain class" 的选择器。 .brand:not(:last-child) 表示 "the element with brand class that is not last child of its parent" 并且 class brand 的所有 span 都符合此条件。

如果您的目标是在 class brand 的 span 之间插入 • 个字符，不是吗除了 first 之外，每个 span.brand before 插入它们更合适？

/* 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-*）

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

Why is my last span breaking my :after styling?

html

css

css-selectors