第一个孩子不工作 [英] 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屋!