第一个孩子不工作 [英] first-child not working

问题描述

这个工作应该疯了吗？

.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 工作正常，研究：first-child 任何想法？

projects:first-child works fine, research:first-child doesn't stick. Any ideas?

演示无效，但是什么是最好的方法来实现呢？

Demo It doesn't work, but whats the best way to achieve this?

推荐答案

：first-child 只选择其父。没有其他。

:first-child only selects the first child of its parent. Nothing else.

如我在网站上的几个其他答案（ 1 2 3 4 ），没有：first-of-class code>伪类。如果你想要将样式应用到 div 元素的每个类的第一个，一个解决方案是将样式应用于该类的所有子类，以及一个通用的兄弟选择器

As mentioned in a few of my other answers on the site (1 2 3 4), there is no :first-of-class pseudo-class. If you are looking to apply styles to the first of each class of your div elements, a solution is to apply the styles to all children of that class, and a general sibling selector to undo the styles from subsequent siblings.

您的CSS将如下所示：

Your CSS would then look like this:

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

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

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

这篇关于第一个孩子不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！