第一个孩子不工作

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不坚持.有任何想法吗？

演示它不起作用,但最好的方法是什么？

Answer 1

:first-child仅选择其父级的第一个子级.没有其他的.

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

你的CSS看起来像这样:

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

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

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