浏览样式表时,我不时会看到如下规则:
padding: 10px inherit;
我不知道这是否是有效的CSS所以我制作了3个JSFiddles.所有3个小提琴都有一个< p> < div>的孩子父母(并在Chrome 59.0中测试过).在first JSFiddle中,子进程继承父填充(单个inherit关键字),并且对元素的检查显示< p>和< div>在x方向和y方向都有10px填充:
div {padding: 10px 10px}
p {padding: inherit}
在second JSFiddle中,孩子< p>有明确继承的x和y填充(1实际<长度>,1继承关键字):
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> (即没有继承填充)
我假设这意味着子元素不能使用速记“部分”继承父属性值.这是正确的,如果是这样,为什么它不能被部分遗传? (即,W3C文档是否在某处提到过这个?).
更新 – 如果明确拆分填充属性(不要使用速记),则可以继承(参见本JSFiddle)
考虑到我在几个样式表中看过案例#2(第二个小提琴),看起来其他开发人员也认为部分继承是有效的.
最佳答案
规范预测了一个属性未设置的三个选项,所有和继承https://www.w3.org/TR/css3-cascade/#propdef-all它甚至说初始|继承|未设置.从字面意义上来说,这意味着这些价值观.因为定义backround是没有意义的:url(‘url.png’)继承;这是发动机内部工作原理的硬编码示例.这有点像定义部分重要性,如填充:20px!important 10px;.不,你必须做填充:!重要的10px;