不明な背景色のCSS継承は実際には透明です
<ul>要素と<li>要素を使用してタブのような機能を作成していますが、CSS background-color: inheritでこの種の予期しない動作が発生していることに気付きました。inheritが実際にtransparentを意味するのではなく、child.background-color == parent.background-color（疑似コードを許す）を意味すると予想されます。
私のコードは非常に単純ですが、問題があります：変数条件のために開発しています。つまり、コードで使用する背景色を知ることはできなかったので、自分の色を紹介したくありません。
私は JSFiddle を用意しました。コードの宛先のランダムさを模倣するために、ページのロード時に背景がランダムに設定されます。明白な問題は、アクティブなタブの背景色が事前設定されているとひどく見えることです。そこで、background-color: inheritに変更しました。 （ JSFiddle 2 を参照）
これによりバックグラウンドの問題は明らかに解決されましたが、inheritプロパティはtransparentのように機能するため、下の要素の境界線（cg_content）が再び表示され始めました。設定された背景色があります。
質問です：JavaScriptなしで実際の背景色を継承する方法はありますか？
そうでない場合、これらのタブを事前に設定された色なしで見栄えよくするためのより良い方法を提案できますか？
追伸：これらのタブはいくつかのコンテンツを共有しているため、コンテンツ<div>は<li>要素の子要素であってはなりません。
P.S.2：JSでこれを行う方法を明らかに知っていることは、これ以上明確にすることはできません。したくないだけです。
background-color: inheritdoesを設定すると、親要素の背景色が使用されます。
transparentを使用している理由は、親の背景色（li）istransparent（デフォルト値）のためです。
2番目のJSFiddleで背景色が設定されている他の唯一の要素は#unknown_backgroundで、これはアンカーの大祖父母です。
スタイルシートの最後にdiv, ul, li { background-color: inherit; }を追加すると、背景がずっと継承され、境界線は表示されなくなります。