css - 我可以使用其祖 parent 的属性设置元素的样式，然后将其父项设置为不同吗？

Question

我正在尝试使用属于其祖 parent 的背景颜色来设置元素的背景颜色的样式，但随后将其父元素设置为具有不同的颜色。这可能吗？

我认为将其父项设置为 inherit 然后将元素设置为 inherit 以“级联”它会起作用，然后我就可以自由地更改父级的背景颜色，但这没有用。

下面是我正在努力完成的精简版。

div {
  background-color: #e00;
}
span.foo {
  background-color: inherit;
}
span.bar {
  background-color: inherit;
}
span.foo {
  background-color: #777;
}

<div>
  <span class="foo">
    Hello
    <span class="bar">
      World
    </span>
  </span>
</div>

Answer 1

你不能用 CSS 做你想做的事，但你的问题也表明你对 CSS 的工作原理有错误的想法，所以解释为什么你不能做你想做的事很重要:

CSS 不是一种编程语言 - 它没有连续的操作模型 - 做这个，然后做那个，就像编程语言一样。

CSS 是一种描述语言 - 它允许您在没有时间函数的情况下描述对象的属性。也就是说——当你在 CSS 中说“继承”时，它并不意味着“复制值并维护你自己的副本”，它意味着“这个值与父级完全一样，并且永远与专利完全一样，即使父级更改”- 因为它不是操作，而是对事物现状的描述。

另一个例子，当你写这样的东西时:

p { color: green; }
p { color: red; }

这并不是说“用绿色然后用红色绘制文本”——它的意思是“设计者认为他想要绿色文本，然后决定红色更好——所以总是用红色绘制文本”。

如果你真的想做一些事情，比如复制另一个元素的值，然后改变源元素，你需要使用一种编程语言——尽管我认为最好的办法是你想办法获得仅使用 CSS 的描述性属性即可获得所需的样式。