CSS - È possibile selezionare più elementi figlio diversi all'interno di un genitore senza ripetere il genitore?

Question

Ho passato in rassegna i selettori CSS tutto il pomeriggio nel tentativo di trovare una risposta a questo perché sembra così semplice ma non riesco a trovare una soluzione per la vita di me.

dato una struttura simile a:

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

Voglio fare tutte le intestazioni un carattere diverso specifico per questa divisione utilizzando un selettore.

miei selettori sarebbero state normalmente:

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

che ora sembra davvero di essere inefficiente. C'è un modo per raccogliere l'ID?

#about h1 + h2 + h3 (incorrect) 

C'è qualcosa di simile a:

#about (h1,h2,h3) 

mi sento come se questo dovrebbe essere ovvio, ma non ho mai visto un tale selezione.

Answer 1

In semplice CSS non è possibile. Se imposti una classe sui tag di intestazione, puoi selezionarli con un solo selettore.

Utilizzando qualcosa come less, si può fare:

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

Answer 2

Per completare Guffa risposta, se non è possibile utilizzare parte di pre-elaborazione server e si deve colpire solo Firefox e Chrome si possono anche utilizzare

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

nel tuo caso si intende utilizzare questo pseudoclasse in questo modo

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

altrimenti l'unico metodo crossbrowser senza l'utilizzo di meno o Sass che riducono la quantità di regole è il selettore universale

#about > * 

ma questo si rivolgerà ogni bambino immediata di #about ed è intrinsecamente inefficiente.