css - 第一个 child 不工作

Question

这项工作会让我发疯吗？

.project.work:first-child:before {
  content: 'Projects';
}
.project.research:first-child:before {
  content: 'Research';
}

<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project work">
  <p>abcdef</p>
</div>
<div class="project research">
  <p>abcdef</p>
</div>

projects:first-child 工作正常，research:first-child 不坚持。有什么想法吗？

Demo它不起作用，但实现此目标的最佳方法是什么？

Answer 1

:first-child 仅选择其父项的第一个子项。没有别的。

正如我在网站上的一些其他答案中提到的那样 ( 1 2 3 4 )，没有 :first-of-class 伪类。如果您希望将样式应用于每个类的第一个 div 元素，一个解决方案是将样式应用于该类的所有子级，并使用通用的兄弟选择器撤消后续样式 sibling 。

你的 CSS 看起来像这样:

.project.work:before {
    content: 'Work';
}

.project.research:before {
    content: 'Research';
}

.project.work ~ .project.work:before, 
.project.research ~ .project.research:before {
    content: none;
}