Html 未知背景颜色的 CSS 继承实际上是透明的
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19616629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Inherit for unknown Background Color is Actually Transparent
提问by mavrosxristoforos
I am creating a tab-like functionality with <ul>and <li>elements, and I noticed this kind-of unexpected behavior with CSS background-color: inherit.
One would expect that inheritwouldn't actually mean transparent, but rather child.background-color == parent.background-color(forgive the pseudo-code).
我正在使用<ul>和<li>元素创建一个类似选项卡的功能，并且我注意到 CSS 的这种意外行为background-color: inherit。
人们会期望这inherit实际上并不意味着transparent，而是child.background-color == parent.background-color（原谅伪代码）。
My code is quite simple, but I have a problem: I'm developing for variable conditions. That means I could never know what background-color will be used with my code, and I don't want to introduce my own.
我的代码很简单，但我有一个问题：我正在为可变条件开发。这意味着我永远不知道我的代码将使用什么背景颜色，而且我不想介绍我自己的。
I have prepared a JSFiddle, in which the background is randomly set on page load, to imitate the randomness of my code's destination. The obvious problem is that the active tab looks awful with its background-color pre-set. So, I changed it to background-color: inherit. (see JSFiddle 2)
我准备了一个JSFiddle，其中背景是在页面加载时随机设置的，以模仿我的代码目的地的随机性。明显的问题是活动标签的背景颜色预设看起来很糟糕。所以，我把它改成了background-color: inherit。（见JSFiddle 2）
While this obviously solved the background issue, the border of the element below (cg_content) started showing again, because the inheritproperty, acts like transparent, instead of what it does when there is a set background-color.
虽然这显然解决了背景问题，但 ( cg_content)下方元素的边框再次开始显示，因为inherit属性的作用类似于transparent，而不是在设置背景颜色时的作用。
Question is: Is there a way to make it inherit the actual background-color without Javascript?
If not, could you suggest a better way to make these tabs look good without pre-set colors?
问题是：有没有办法让它在没有 Javascript 的情况下继承实际的背景颜色？
如果没有，您能否提出一种更好的方法来使这些标签在没有预设颜色的情况下看起来更好？
P.S.: The content <div>should not be a child element of the <li>elements, as these tabs share some contents.
P.S.2: I can't make it any more clear, that I obviously know how to do this with JS. I just don't want to.
PS：内容<div>不应是元素的子<li>元素，因为这些选项卡共享一些内容。
PS2：我不能说得更清楚了，我显然知道如何用 JS 做到这一点。我只是不想。
回答by Quentin
Setting background-color: inheritdoescause it to take the background colour of the parent element.
设置background-color: inherit确实会导致它采用父元素的背景颜色。
The reason it is taking transparentis because the background colour of the parent (the li) istransparent(the default value).
之所以采用它，transparent是因为父级 (the li)的背景颜色是transparent（默认值）。
The only other element in your second JSFiddle which has a background colour set is #unknown_background, which is the anchor's great-great-grandparent.
您的第二个 JSFiddle 中唯一具有背景颜色集的其他元素是#unknown_background，它是锚点的曾曾祖父母。
Add div, ul, li { background-color: inherit; }to the end of your stylesheet and the background will be inherited all the way down and the border will not show up.
添加div, ul, li { background-color: inherit; }到样式表的末尾，背景将一直向下继承，边框不会显示。
