未知背景颜色的 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 属性的作用类似于 transparent，而不是在设置背景时的作用-颜色。

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

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

Answer 1

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

之所以采用transparent是因为父级（li）的背景色是transparent（默认值）。

您的第二个 JSFiddle 中唯一具有背景颜色集的其他元素是 #unknown_background，它是锚的曾曾祖父。

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

Answer 2

按照@mavrosxristoforos 的建议发布此内容，赞！这不是一个答案，而是更多地添加到此处可用的信息中。希望这对那里的某些人有用。

如果您只需要一个不与文本颜色冲突但仍然非常明显的非透明背景：我的解决方案涉及使用currentColor 和过滤器的组合，例如invert、contrast 或brightness 在父元素和子元素上。

此技巧适用于动态主题，例如浅色、深色甚至彩色主题，而无需为这些元素明确指定任何颜色值。这可以与一些现有的 CSS 主题一起使用，这些主题没有使用 CSS 变量定义的东西或缺少类以有条件地仅更改特定颜色。观察下面的演示。

var root = document.documentElement;
var themeDark = true;

updateTheme( themeDark );

$('.card').on('click', function(){
  themeDark = !themeDark; // switch the theme
  updateTheme(themeDark);
});

function updateTheme(useDarkTheme){
  if (useDarkTheme) {
      root.style.setProperty('--primary','#000');
      root.style.setProperty('--secondary','#333');
      root.style.setProperty('--ternary','#eee');
    } else {
      root.style.setProperty('--primary','#efefef');
      root.style.setProperty('--secondary','#ddd');
      root.style.setProperty('--ternary','#333');
    }
}

/* say you're using a bootstrap theme with some defined colors, 
 * but you want to customize some colors of some elements which
 * have colors defined without CSS variables that you could 
 * have used.
 */

body {
  font-family: sans-serif; font-size: 14px;
  color: var(--primary);
  background: var(--secondary);
  }

.card {
  border: 1px solid #666; border-radius: 6px;
  padding: 1em; margin: 1em;
  user-select: none; cursor: pointer;
  background: var(--ternary);
  }

.card h2 {
  font-size: 24px;
  color: var(--primary);
  }

.card-body {
  border-radius: 6px;
  background: currentColor;
  }

.card-body p { padding: 1em; }

.card-body, .card-body p { filter: invert(1) contrast(1.2) brightness(0.8); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">
  <h2>Title</h2>
  <div class="card-body">
    <p><b>Click to toggle the theme.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>