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

前端之家收集整理的这篇文章主要介绍了为什么不能使用简写部分继承CSS填充?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

浏览样式表时,我不时会看到如下规则:

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;

猜你在找的CSS相关文章