理解层叠和CSS初始值

Question

我的这个 html 页面有 css 样式。

.paragraphs {
  color: orange;
  background-color: gray;
}

p.first {
  color: inherit;
  background-color: inherit;
}

p.second {
  color: initial;
  background-color: initial;
}

<div class="paragraphs">
  <p class="first">Paragraph 1</p>
  <p class="second">Paragraph 2</p>
</div>

两个元素都有灰色的背景颜色，但是p.first会被赋予橙色的color, 而p.second则是黑色的color。

为什么使用background-color: initial;不能将background-color返回到它的默认状态，而color: initial;却可以呢？

- null_pointer

Answer 1

因为

标签的background-color的initial值是transparent或者none，所以会出现这种情况。

当检查元素时，您还可以查看第二个

标签的计算样式。在那里，您将看到background-color实际上具有值rgba(0, 0, 0, 0)，这与透明黑色相同。

关于继承、初始和未设置值，quirksmode.org 上有一篇很好的文章请参阅。

- lumio

---

这很有道理。我没有考虑默认值是“透明”的。 - null_pointer

Answer 2

如果您将 p 元素定位在其父元素之外，您可以轻松地理解发生了什么。 DEMO inherit 表示与父元素相同。 initial 表示背景的默认值为透明，颜色的默认值为黑色。

- Amin Jafari

Answer 3

你定义给 div.paragraphs 的 CSS 样式不会被 p.first 和 p.second 继承。如果你的 CSS 样式如下，它们就会被继承：

p {
  color: orange;
  background-color: gray;
}

p.first {
  color: inherit;
  background-color: inherit;
}

p.second {
  color: initial;
  background-color: initial;
}

现在所有段落（<p>标签）都将继承。具有类first和second的段落将使用给定的值覆盖这些值。

- meavo