html - 未知背景颜色的 CSS 继承实际上是透明的

Question

我正在使用 <ul> 创建类似选项卡的功能和 <li>元素，我注意到这种 CSS 的意外行为 background-color: inherit .
人们会期望 inherit实际上并不意味着 transparent ，而是 child.background-color == parent.background-color (请原谅伪代码)。

我的代码非常简单，但我遇到了一个问题:我正在针对可变条件进行开发。这意味着我永远无法知道我的代码将使用哪种背景颜色，而且我不想介绍我自己的背景颜色。

我准备了一个JSFiddle ，其中背景是在页面加载时随机设置的，以模仿我的代码目标的随机性。明显的问题是事件选项卡的背景色预设看起来很糟糕。所以，我把它改成了background-color: inherit . (参见 JSFiddle 2)

虽然这显然解决了背景问题，但下方元素 ( cg_content ) 的边框再次开始显示，因为 inherit属性(property)，就像transparent ，而不是在设置背景颜色时执行的操作。

问题是:有没有办法让它在没有Javascript的情况下继承实际的背景颜色？
如果没有，您能否建议一种更好的方法来使这些标签在没有预设颜色的情况下看起来不错？

P.S.: 内容<div>不应该是 <li> 的子元素元素，因为这些选项卡共享一些内容。
P.S.2:我再清楚不过了，我显然知道如何用 JS 做到这一点。我只是不想。

Answer 1

设置background-color: inherit 确实会导致它采用父元素的背景色。

它采用透明的原因是因为父级(li)的背景色是 透明(默认值)。

第二个 JSFiddle 中唯一设置了背景色的元素是 #unknown_background，它是 anchor 的曾曾祖 parent 。

添加 div, ul, li { background-color: inherit; 到样式表的末尾，背景将一直向下继承，边框不会显示。