Question

我有一些像这样的代码：

<span class="item multifilter-wrapper multifilter">
  <span class="item multifilter multifilter-item">
    <div></div>
  </span>
  <span class="item multifilter multifilter-item">
     <div></div>
  </span>
  <span class="item multifilter multifilter-item hasdata">
     <div>HELLO</div>
  </span>
</span>

任何multifilter-item范围都可以包含内容，如果它有内容，我会添加hasdata类，如上一项。

我想在两个multifilter-item范围之间添加一个分隔符，以防有多个数据，所以我有这个BEFORE规则：

.multifilter-wrapper .hasdata:not(:first-child)::before{
   content: '|';
}

然而，它只是添加上面示例中的内容，只有1 hasdata范围。

任何想法为什么？

Answer 1

这是因为.has-data不是第一个孩子，所以它按预期匹配。

我认为你对:first-child的作用感到困惑。它检查它是否是它的父元素的第一个子元素元素（它不是因为它之前有2个其他元素）。它确实不检查它是否是第一个也是.hasdata类的孩子。

基本上逻辑是：

class is hasdata
AND 不是第一个子元素

它与这些规则匹配，这就是添加内容分隔符的原因。

没有办法在CSS中识别具有特定类名的第一个子类，不能为“不是第一个hasdata类”编写规则。我建议您修改html以使用类似notfirsthasdata的内容来标识不是第一个包含内容的元素。

有first-of-type这是你想要的逻辑类型，但我相信这只与元素类型（在你的情况下为span）而不是类名匹配。

Answer 2

无需修改标记，您可以使用常规同级选择器：~（http://www.w3.org/TR/css3-selectors/）

http://jsfiddle.net/ossx1v1k/

.multifilter-wrapper .hasdata ~ .hasdata::before{
   content: '|';
}

请注意，我已经从我的jsfiddle示例中的div标记内删除了span标记，因为正如Paulie_D所说，它是无效的标记，内部有块元素内联的。

不是第一个具有给定类的元素

2 个答案: