Eredita CSS per il colore di sfondo sconosciuto è effettivamente trasparente

Question

Sto creando una funzionalità di tipo tab con gli elementi <ul> e <li> e ho notato questo tipo di comportamento imprevisto con i CSS background-color: inherit.
Uno si aspetterebbe che inherit non significhi in realtà transparent, ma piuttosto child.background-color == parent.background-color (perdonare lo pseudo-codice).

Il mio codice è abbastanza semplice, ma ho un problema: Sto sviluppando per condizioni variabili. Ciò significa che non potrei mai sapere quale colore di sfondo sarà usato con il mio codice, e non voglio presentarmi il mio.

Ho preparato uno JSFiddle, in cui lo sfondo è impostato in modo casuale sul caricamento della pagina, per imitare la casualità della destinazione del mio codice. Il problema ovvio è che la scheda attiva sembra terribile con la sua preimpostazione di colore di sfondo. Così, l'ho cambiato in background-color: inherit. (Vedi JSFiddle 2)

Mentre questo ovviamente risolto il problema di fondo, il bordo dell'elemento di sotto (cg_content) iniziato mostrando di nuovo, poiché la proprietà inherit, agisce come transparent, invece di ciò che avviene quando v'è un insieme sfondo- colore.

La domanda è: C'è un modo per ereditare il colore di sfondo effettivo senza Javascript?
In caso contrario, potresti suggerire un modo migliore per rendere queste schede belle senza colori preimpostati?

P.S .: Il contenuto <div> non deve essere un elemento figlio degli elementi <li>, poiché queste schede condividono alcuni contenuti.
P.S.2: Non riesco a rendere più chiaro, che ovviamente so come farlo con JS. Io proprio non voglio.

Answer 1

L'impostazione background-color: inheritfa causa di prendere il colore di sfondo dell'elemento padre.

Il motivo che sta prendendo transparent è perché il colore del genitore sfondo (la li) ètransparent (il valore predefinito).

L'unico altro elemento nel secondo JSFiddle con set di colori di sfondo è #unknown_background, che è il bis-bis-nonno dell'ancora.

Aggiungi div, ul, li { background-color: inherit; } alla fine del foglio di stile e lo sfondo verrà ereditato fino in fondo e il bordo non verrà visualizzato.