第一个孩子不工作答案

【问题标题】：first-child not working第一个孩子不工作
【发布时间】：2012-01-22 01:40:06
【问题描述】：

这个工作我要疯了吗？

.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 它不起作用，但实现这一目标的最佳方法是什么？

【问题讨论】：

:first-child 只选择第一个孩子。没有别的了。
.project.research:first-child 这不是第一次吗？
是，但不是其父级的第一个子级。
所以它是在看父母而不是看孩子？我应该使用 Jquery 来选择它吗？
为什么要使用第一个孩子？你不能只使用 .project.work p:before 和 .project.research p:before

标签： css css-selectors

【解决方案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;
}

【讨论】：

在纯 CSS 中没有办法动态应用它（即，如果您决定稍后添加更多类，则无需对额外的类进行硬编码）。添加更多类后，您必须以这种模式手动将它们添加到 CSS 中。
完美，适用于所有并撤消兄弟姐妹。谢谢@boltclock 所以如果我添加了另一个像.project.photography 这样的类，它不会工作吗？
fiddle 重复照片 :first-child 我做错了什么吗？
@uriah：你的最后一个选择器应该是.project.work ~ .project.work:before, .project.photo ~ .project.photo:before, .project.research ~ .project.research:before，你在照片部分有一个额外的.project.work ~。与+ 不同，~ 选择器不会将自身限制为相邻的兄弟姐妹，因此您不需要额外的工作选择器。
抱歉，this 应该工作吗？照片不应该只出现一次吗？

【解决方案2】：

来自specification：

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

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

【讨论】：

【解决方案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，而是可以使用*:first-child。

【讨论】：

谢谢！我只想选择同类中的第一个并应用 CSS 而不是每个元素。这会选择所有这些。
@uriah：啊。我不认为你可以在不改变你的标记的情况下做到这一点。我认为即使是 CSS3 选择器也没有办法选择具有给定类名对的容器中的第一个元素。即使:first-of-type 也适用于元素类型，而与类无关。