Question

在浏览样式表时，我不时会看到如下规则：

padding: 10px inherit;

我不知道这是否是有效的CSS所以我制作了3个JSFiddles。所有3个小提琴都有<p>个<div>父母的孩子（并在Chrome 59.0中测试过）。在first JSFiddle中，子项继承父填充（单个inherit关键字）并且元素检查显示<p>和<div>在x-中都有10px填充和y方向：

div {padding: 10px 10px}
p {padding: inherit}

在second JSFiddle中，子<p>明确继承了x和y填充（1个实际<length>，1个inherit关键字）：

div {padding: 10px 10px}
p {padding: 10px inherit}

<p>的检查表明CSS已经破坏（即没有继承填充）;

在third JSFiddle中（为了完整性），子<p>也明确继承了x和y填充，但在这种情况下，有2个单独的inherit个关键字：

div {padding: 10px 10px}
p {padding: inherit inherit}

此CSS也会中断<p>（即没有继承填充）

我假设这意味着子元素不能＆＃34;部分＆＃34;使用速记继承父属性值。 这是正确的，如果是这样，为什么它不能被部分继承？（即，W3C文档是否在某处提到过这个？）。

更新 - 如果您明确拆分填充属性（不要使用速记），则可以继承（请参阅此JSFiddle）

考虑到我在几个样式表中看过案例＃2（第二个小提琴），看起来其他开发人员也认为部分继承是有效的。

Answer 1

规范为属性unset，all和inherit https://www.w3.org/TR/css3-cascade/#propdef-all提供了三个选项。它甚至说initial | inherit | unset。从字面意义上来说，这意味着这些价值观。因为定义backround:url('url.png') inherit;没有意义。这是发动机内部工作原理的硬编码示例。这有点像定义padding:20px !important 10px;之类的部分重要性。不，你必须做padding:!important 10px;

Answer 2

虽然我不知道为什么会这样，但您可以执行以下操作：

div {padding: 10px 10px}
p {
  padding: inherit;
  padding-bottom: 20px;
  padding-top: 20px;
}

为什么不能使用简写来部分继承CSS填充？

2 个答案: