Question

HTML

<div class="breadcrumbs row">
  <button><a href="#">One</a></button>
  <button><a href="#">Two</a></button>
  <h1><button><a href="#">Three</a></button></h1>
</div>

麻烦的CSS

.breadcrumbs button:not(:first-of-type)::before {
  content: ' / ';
  cursor: default
}

我想在.breadcrumbs中匹配除第一个按钮之外的所有按钮，并在其前面添加/。为什么我的规则不起作用？

编辑（忘记最重要的问题）：什么CSS规则可以实现我想要的目标？

JSFiddle

Answer 1

它不起作用，因为最后一个按钮在<h1>范围内，并且它是那里的第一个孩子。

您可以添加第二个匹配所有<h1>子元素的CSS选择器，除非在第一个位置，如下所示：

.breadcrumbs button:not(:nth-child(1))::before,
.breadcrumbs h1:not(:nth-child(1)) button::before {
  content: ' / ';
  cursor: default
}

这也有效，但正如评论中所指出的那样，HTML无效：

<button><h1><a href="#">Three</a></h1></button>

Answer 2

正如在其他答案中提到的那样，使用:not(:first-of-type)在其父元素中查找第一个类型并为此

<h1><button><a href="#">Three</a></button></h1>

button是其父级内该类型的第一个元素，即h1

更改按钮元素的选择器，如下所示

<强> CSS

.breadcrumbs > button:not(:first-child)::before, 
.breadcrumbs > h1:not(:first-child) > button::before{
  content: ' / ';
  cursor: default
}

这是fiddle

Answer 3

因为您的HTML结构不够完善。只有当面包屑的每个子元素都是按钮标记时，您的规则才有效。

请在第三个按钮周围取出 h1标记，然后开始营业。

Answer 4

正如您在this fiddle中看到的那样，我删除了not()，第一个和最后一个按钮的前缀为/。

这是因为第3个按钮是:first-of-type内部的<h1>个标记。

Answer 5

它不起作用的原因是因为h1中的按钮具有与其他元素不同的父元素。 :first-of-type表示给定父元素中的第一个。

未匹配首先排除的所有按钮

5 个答案: