CSS - Thiết kế tầng lớp phụ huynh nếu con có một lớp học cụ thể

Question

thể trùng lặp:
Complex CSS selector for parent of active child
Is there a CSS parent selector?

Có cách nào để thiết kế lớp cha mẹ dựa trên nếu phần tử con của nó có một lớp học cụ thể?

<div class="container"> 
    <div class="content1"> 
     text 
    </div> 
</div> 

.

<div class="container"> 
    <div class="content2"> 
     text 
    </div> 
</div> 

Tôi muốn thiết kế .container đầu tiên khác nhau dựa trên nếu lớp con là content1 hoặc content2. Nó phải là giải pháp css thuần túy, không có javascript.

Answer 1

Không, bạn không thể làm điều đó. CSS không thể chọn các phần tử dựa trên con của chúng, ngoại trừ việc kiểm tra xem phần tử có trống không.

Answer 2

Những gì bạn đang yêu cầu là bộ chọn CSS cha mẹ huyền thoại. Có lẽ một ngày nào đó.

Answer 3

Tại sao không sử dụng container1 + content và container2 + content?

<div class="container1"> 
    <div class="content"> 
     text 
    </div> 
</div> 

<div class="container2"> 
    <div class="content"> 
     text 
    </div> 
</div> 

Và sau đó viết CSS như sau:

.container1 .content { 
    /* Container 1 styles here */ 
} 

.container2 .content { 
    /* Container 2 styles here */ 
}