첫 번째 자녀가 작동하지 않음

Question

나는이 일을해야할까요?

projects:first-child

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

잘 작동, research:first-child 스틱하지 않습니다. 어떤 아이디어?

Demo 작동하지 않지만이를 수행하는 가장 좋은 방법은 무엇입니까? specification에서

Answer 1

:first-child은 부모의 첫 번째 자식 만 선택합니다. 다른 건 없어. 사이트 (1234) 내 다른 답변의 몇에서 언급 한 바와 같이

, 아니 :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; 
} 

Answer 2

: :nth-child(1)로

동일합니다. :first-child 가상 클래스는 다른 요소의 첫 번째 자식 요소를 나타냅니다.

.project.research은 부모의 첫 번째 자녀가 아닙니다.

Answer 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

"(또는"프로젝트 "와"연구 "). p 요소가 아닌 경우 p:first-child을 사용할 필요가 없으며 대신 *:first-child을 사용할 수 있습니다.