CSS - Có thể chọn nhiều phần tử con khác nhau trong một phụ huynh mà không lặp lại phụ huynh không?

Question

Tôi đã pawing trên CSS selectors tất cả các buổi chiều trong một nỗ lực để tìm một câu trả lời cho điều này bởi vì nó có vẻ rất đơn giản nhưng tôi không thể cho cuộc sống của tôi tìm thấy bất kỳ giải pháp.

Cho một cấu trúc tương tự như:

<div id="about> 
    <h1></h1> 
    <h2></h2> 
    <h3></h3> 
</div> 

Tôi muốn làm cho tất cả các tiêu đề một kiểu chữ khác nhau đặc trưng cho bộ phận này sử dụng một selector.

selectors của tôi sẽ bình thường đã được:

#about h1, 
#about h2, 
#about h3 { 
} 

Mà bây giờ thực sự dường như là không hiệu quả. Có cách nào để đối chiếu ID không?

#about h1 + h2 + h3 (incorrect) 

Có một cái gì đó tương tự như:

#about (h1,h2,h3) 

Tôi cảm thấy như thể này nên được rõ ràng nhưng tôi chưa bao giờ thấy một lựa chọn như vậy.

Answer 1

Trong CSS đơn giản, không thể thực hiện được. Nếu bạn đặt một lớp trên thẻ tiêu đề, bạn có thể nhắm mục tiêu chúng bằng một bộ chọn duy nhất.

Sử dụng một cái gì đó giống như less, bạn có thể làm:

#about { 
    h1, h2, h3 { ... } 
} 

Answer 2

Để hoàn Guffa câu trả lời, nếu bạn không thể sử dụng phía máy chủ tiền xử lý và bạn phải chỉ nhắm mục tiêu Firefox và Chrome bạn cũng có thể sử dụng

:-moz-any(selector[, selector]*) 
:-webkit-any(selector[, selector]*) 

trong trường hợp của bạn, bạn sẽ sử dụng kính giả theo cách này

#about :-moz-any(h1, h2, h3) { ... } 

nếu không thì phương pháp crossbrowser chỉ mà không cần sử dụng ít hoặc sass rằng giảm lượng quy tắc là chọn phổ

#about > * 

nhưng điều này sẽ nhắm mục tiêu mỗi đứa trẻ ngay lập tức #about và nó là bản chất không hiệu quả.