继承了哪些 CSS 属性？

Posted 2023-03-06

【中文标题】继承了哪些 CSS 属性？

【英文标题】：Which CSS properties are inherited?

【发布时间】：2011-08-02 12:12:28

【问题描述】：

我注意到在 CSS 中有些属性是继承的，有些则不是。例如，继承了 text-size 属性，但子块不继承 padding 和 margin。那么如何判断哪些属性是继承的，哪些不是呢？

【问题讨论】：

也可以自己设置inherit到任意属性，即width:inherit;

【参考方案1】：

我发现回答这个问题和类似问题的最佳参考页面（比如哪些 CSS 属性没有被继承）是：

https://www.w3.org/TR/CSS21/propidx.html

它有一列用于“继承”（或不继承）。

页面显示“本规范的多个部分已更新”。但是我在任何地方都找不到更新的版本，在一个简洁的表格中列出了所有 CSS 属性。但我认为这张桌子很棒，正是我想要的。还回答了每个 CSS 属性的可能值以及初始（= 默认）值的问题。

如果您想查看分组在一起的所有继承或非继承属性，您可以从网页复制文本并将其插入 Excel 等，然后根据“继承？”列对其进行排序。效果很好，我试过了。

【讨论】：

接受的答案包含指向完全相同资源的链接。

我现在看到了该链接，但它并没有真正告诉您这是您自己查找权威答案的地方。它只是说“我正在使用 W3C 的信息”。而不是“使用”它更像是“我从这个官方资源中复制了我的列表”。向读者指出这是有用的，他们可以从中找到完全相同的信息，并可能为自己找到更多最新信息。仅仅因为一个答案被“接受”并不意味着它不能被改进。

如果某个答案可以改进，请在其上发表评论，说明您将改进什么或自己编辑。

我认为，当您认为自己有一个更好的答案时，最好给出一个单独的替代答案，如果您指出您认为他们的答案有些“错误”，原作者可能会被冒犯。 Stack Overflow 上的负面情绪已经太多了。

【参考方案2】：

这是所有可继承属性的列表。 我正在使用W3C's information，所以我猜它应该是正确的。但是知道网络浏览器（特别是 IE），其中一些可能不是所有浏览器都可以继承的：

azimuth border-collapse border-spacing caption-side color cursor direction elevation empty-cells font-family font-size font-style font-variant font-weight font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans pitch-range pitch quotes richness speak-header speak-numeral speak-punctuation speak speech-rate stress text-align text-indent text-transform visibility voice-family volume white-space widows word-spacing

【讨论】：

是否有任何经验法则可以应用于此列表？这些属性有什么共同点吗？

@Kaivosukeltaja 我觉得有一条经验法则——任何无限期地完成都不会导致页面被抓取。无限期地填充会导致最深的元素剩下非常小的空间。边距也一样。

请注意，该表中的“Inherited”列以及每个propdef，指的是属性是否被继承默认情况下，作者无需指定@987654364 @ 价值。 inherit 值可用于强制任何属性继承，包括“已继承”列为否的属性。

@TxRegex：欢迎您根据需要编辑我的答案。我并没有真正跟踪所有的变化。

对于 Kaivosukeltaja，答案有一个指向 w3.org/TR/CSS21/propidx.html 的链接，该链接以简洁的方式包含答案中的所有信息等等。它有名为“媒体组”的列，应该回答您的（后续）问题。

【参考方案3】：

方位角 边框折叠 边框间距 字幕端 颜色 光标 方向 海拔 空单元格 字体系列字体大小 字体样式 字体变体 字体粗细 字体 字母间距 行高 列表样式图像 列表样式位置 列表样式类型 列表样式 孤儿 音高范围 推介报价 丰富度 演讲标题 说数字 说标点符号 说话 语速 压力 文本对齐 文本缩进 文本转换 可见性 语音家族 音量 空白 寡妇 字间距

^Source

【讨论】：

你是从我的回答中复制过来的吗？

@Blender：不，我从http://www.slideshare.net..css-inheritance 找到了一张幻灯片，在你发布之前它就被列为来源。 :)

但你原来有一张图片。哦，好吧。

@Blender：是的，我把它转成文本了。我没有复制/粘贴你的。不用担心。

@Blender 请注意，这个答案的 text-index 应该是 text-indent。

【参考方案4】：

Blender 和 Shaz 的列表都列举了所有继承的 CSS 2.1 属性，包括那些用于听觉媒体的属性，例如 azimuth。下面是一个没有面向听觉的属性的列表，现在包括 CSS3 属性。

border-collapse border-spacing caption-side color cursor direction empty-cells font-family font-size font-style font-variant font-weight font-size-adjust font-stretch font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans quotes tab-size text-align text-align-last text-decoration-color text-indent text-justify text-shadow text-transform visibility white-space widows word-break word-spacing word-wrap

【讨论】：

我最好将其更新为现代 CSS 而不是 css 2.1 规范。

致文森特唐：看我的回答，它可能来自w3.org/TR/CSS21/propidx.html。没关系，一些匿名的人已经立即对它投了反对票（没有解释或评论）。这个链接是我能找到的最好的参考。如果有人有更好的，我很乐意看到它。