小孩不工作

这项工作我应该疯了吗？

.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>

---

: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;
}

---

从规格：

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

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

---

我相信你想要这个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';}

更新小提琴

这与一个元素的第一个子元素与类“项目”和“工作”（或“项目”和“研究”）匹配。 如果不是p元素，则不必使用p:first-child ，您可以使用*:first-child来代替。

链接地址: http://www.djcxy.com/p/22865.html

上一篇: child not working

下一篇: CSS select the first child from elements with particular attribute