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>
:first-child
only selects the first child of its parent. Nothing else.
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.
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;
}
From the specification:
Same as :nth-child(1)
. The :first-child
pseudo-class represents an element that is the first child of some other element.
.project.research
is not the first child of its parent.
I believe you want this CSS:
.project.work p:first-child:before {content:'Projects';}
.project.research p:first-child:before {content:'Research';}
or
.project.work > p:first-child:before {content:'Projects';}
.project.research > p:first-child:before {content:'Research';}
Updated fiddle
That matches the first child of an element with the classes "project" and "work" (or "project" and "research"). You don't have to use p:first-child
if it may not be a p
element, you could use *:first-child
instead.
下一篇: 小孩不工作