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元素的每个类的第一个，则解决方案是将样式应用于该类的所有子类，以及一般兄弟选择器以从后续兄弟中撤消样式。 / p>

您的CSS将如下所示：

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

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

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

Answer 2

来自specification：

与:nth-child(1)相同。 :first-child伪类表示一个元素，它是某个其他元素的第一个子元素。

.project.research不是其父母的第一个孩子。

Answer 3

我相信你想要这个CSS：

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

或

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

Updated fiddle

将元素的第一个子与“project”和“work”（或“project”和“research”）类匹配。如果它不是p:first-child元素，则您不必使用p，而是可以使用*:first-child。

第一个孩子不工作

3 个答案: