con đầu tiên không hoạt động

Question

Tôi có nên làm việc này không?

.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 hoạt động tốt, research:first-child không dính. Bất kỳ ý tưởng?

Demo Nó không hoạt động, nhưng cách tốt nhất để đạt được điều này là gì?

Answer 1

:first-child chỉ chọn con đầu tiên của cha mẹ. Không có gì khác.

Như đã đề cập trong một vài câu trả lời khác của tôi trên các trang web (1234), không có pseudo-class :first-of-class. Nếu bạn đang tìm cách áp dụng kiểu cho lớp đầu tiên của mỗi phần tử trong các phần tử div, giải pháp là áp dụng kiểu cho tất cả trẻ em của lớp đó và bộ chọn anh chị em chung để hoàn tác các kiểu từ anh chị em sau đó.

CSS của bạn sau đó sẽ trông như thế này:

.project.work:before { 
    content: 'Work'; 
} 

.project.research:before { 
    content: 'Research'; 
} 

.project.work ~ .project.work:before, 
.project.research ~ .project.research:before { 
    content: none; 
} 

Answer 2

Từ specification:

Tương tự như :nth-child(1). Lớp giả :first-child đại diện cho một phần tử là phần tử con đầu tiên của một phần tử khác.

.project.research không phải là con đầu tiên của cha mẹ.

Answer 3

Tôi tin rằng bạn muốn CSS này:

.project.work p:first-child:before {content:'Projects';} 
.project.research p:first-child:before {content:'Research';} 

hoặc

.project.work > p:first-child:before {content:'Projects';} 
.project.research > p:first-child:before {content:'Research';} 

Updated fiddle

Đó phù hợp với đứa con đầu lòng của một yếu tố với các lớp "dự án" và "công việc "(hoặc" dự án "và" nghiên cứu "). Bạn không phải sử dụng p:first-child nếu có thể không phải là yếu tố p, thay vào đó bạn có thể sử dụng *:first-child.