问题描述
在浏览样式表时，我不时看到如下规则:
From time to time when browsing through stylesheets, I have seen rules such as the following:
padding: 10px inherit;
我不知道这是否是有效的CSS，所以我做了3个JSFiddles.所有3个小提琴都有一个<p>父级的<p>子级(已在Chrome 59.0中进行了测试).在第一个JSFiddle 中，子级继承父填充(单个inherit关键字)并检查元素显示<p>和<div>在x和y方向上都有10px的填充:
I didn't know if this was valid CSS so I made 3 JSFiddles. All 3 fiddles have a <p> child of a <div> parent (and were tested in Chrome 59.0). In the first JSFiddle, the child inherits the parent padding (a single inherit keyword) and inspection of the elements show both <p> and <div> have 10px padding in both the x- and y-directions:
div {padding: 10px 10px}
p {padding: inherit}
在第二个JSFiddle 中，子<p>具有显式继承的x和y填充( 1个实际的<length>，1个inherit关键字):
In the second JSFiddle, the child <p> has both x and y padding explicitly inherited (1 actual <length>, 1 inherit keyword):
div {padding: 10px 10px}
p {padding: 10px inherit}
对<p>的检查显示CSS已损坏(即未继承填充)；
Inspection of <p> shows the CSS has broken (i.e., no padding inherited);
在第三个JSFiddle 中(出于完整性考虑)，子<p>也同时具有x和y填充是显式继承的，但在这种情况下，有2个单独的inherit关键字:
In the third JSFiddle (for completeness), the child <p> also has both x and y padding explicitly inherited, but in this case there are 2 separate inherit keywords:
div {padding: 10px 10px}
p {padding: inherit inherit}
，并且此CSS也会中断<p>(即不继承填充)
and this CSS also breaks for <p> (i.e., no padding inherited)
我假设这意味着子元素不能使用速记方式部分"继承父属性值. 这是正确的吗?如果是这样，为什么不能部分继承它?(即W3C文档是否在某处提到了这一点?).
I am assuming this means that child elements cannot "partially" inherit parent property values using shorthand. Is this correct, and if so, why can it not be partially inherited? (i.e., do the W3C docs mention this somewhere?).
更新-如果您显式拆分padding属性(不使用简写形式)，则可以继承(请参见此 JSFiddle )
UPDATE - If you split the padding property explicitly (don't use shorthand), you CAN inherit (see this JSFiddle)
考虑到我在几个样式表中看到了案例2(第二个Fiddle)，看来其他开发人员也认为部分继承是有效的.
Considering that I have seen case #2 (second Fiddle) in several stylesheets, it looks like other developers also think partial inheritance is valid.
推荐答案
规范规定了属性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;
The spec presesnts three options for a property unset,all and inherit https://www.w3.org/TR/css3-cascade/#propdef-all It even says initial | inherit | unset. It means these values in a literal sense. Because it wouldn't make sense to define backround:url('url.png') inherit;. This is a hard coded example of how the engine works internally. It is sort of like defining partial importance like padding:20px !important 10px;. No you have to do padding:!important 10px;
这篇关于为什么不能使用速记方式部分继承CSS填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！