继承父div的所有css属性到子div答案

【问题标题】：Inherit all css properties from parent div to child div继承父div的所有css属性到子div
【发布时间】：2026-02-10 12:55:01
【问题描述】：

我的html，

<div id="parent">
    <div id="child">

    </div>

</div>

css 的样子，

#parent{
height:100px;
width:200px;
any-aother-property1:something;
any-aother-property2:something;
any-aother-property3:something;
}

有没有办法一次性继承所有属性给子级，意思是我可以喜欢吗，

$('#child').properties= $('#parent').properties

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果您真的想动态继承所有在运行时赋予父级的 CSS 属性，您可以执行以下操作。

注意：这会覆盖所有属性的默认值。一般来说，明智的做法是假设默认值是正确的，直到证明并非如此。有些属性默认是inherit，有些则不是因为各种原因。因此，您可能应该只覆盖需要更改的特定属性。

#child {
    all: inherit;
}

【讨论】：

注意：这几乎肯定不是问题的意图，即使它确实回答了问题。 all 继承“所有属性，包括通常不可继承的属性”
您能否详细说明“这可能不是您想要的”？有没有这样有用的情况？
@JimB 我详细说明了注意事项 :)

【解决方案2】：

这就够了吗？

#parent, #parent > div {
    /* your properties */
}

【讨论】：

如果直到运行时我真的不知道所有父级 css 属性怎么办？
只能给孩子id为什么要这样？它更简单。
@Flopet17 因为 css 中的 id 是邪恶的。我宁愿做#parent, #parent .inheritStyle {...}。并将 class='inheritStyle' 添加到孩子。或者更好的是只给他们 class='myStyle' 和样式 .myStyle by css。
@Fledgling 我发现了这个：upshots.org/javascript/jquery-copy-style-copycss 希望对您有所帮助
@Fledgling 我个人会为 class .myStyle {} 定义一个 css 样式，然后将 myStyle 类名添加到父级和子级。或者您是否在运行时通过 javascript 设置父级的内联样式？然后你需要做 document.getElementById('child').style = document.getElementById('parent').style;每次父样式更改时。

【解决方案3】：

内联复制：

$('#child').get(0).style = $('#parent').get(0).style;

但如果您找到其他答案中所述的 CSS 方式会更好。

更新：

获取所有样式：

$('#child').get(0).style = window.getComputedStyle($('#parent').get(0), null);

【讨论】：

这只会继承内联给父级的样式。但是，如果使用 class 给出任何 css，它不会继承那些 .. 谢谢

【解决方案4】：

据我所知，没有这样的事情，但你总是可以这样做：

#parent, #child{
    height:100px;
    width:200px;
    any-aother-property1:something;
    any-aother-property2:something;
    any-aother-property3:something;
}

添加两个 id 以具有相同的属性。

【讨论】：

如果直到运行时我真的不知道所有父级 css 属性怎么办？

【解决方案5】：

由于默认情况下子项会继承其父项的大部分样式，因此您可以专注于清除子项的样式，而不是将它们设置为与父项的样式相同。

在 Chrome 和 Opera 中，只需一行代码即可：

$('#child')[0].style.all= 'unset';

无论child 的 CSS 属性是在样式表中还是动态创建，这都有效。

要仅清除动态创建的 CSS，您可以在所有现代浏览器中执行此操作：

$('#child')[0].style.cssText= '';

这将恢复样式表属性。

您的问题的跨浏览器解决方案可能如下：

var cs= getComputedStyle($('#child')[0]);
for (var i=0 ; i<cs.length; i++) {
  $('#child').css(cs[i], 'inherit');
}

这将遍历child 的所有样式，将它们设置为从父级继承。

您可以在这个 Fiddle 的不同浏览器中测试这些方法中的每一个：

http://jsfiddle.net/9c3sy2eb/7/

【讨论】：

【解决方案6】：

我在我的库中添加了一个函数，custags.js，它将帮助你做到这一点。

这是extendcss()，它需要元素的查询选择器或其他方法才能起作用。您可以对任何类型的元素执行此操作，可以是 equals 或 parent-child。

这是工作演示：-

const parent = document.querySelector('.parent')
const child = document.querySelector('.child');
Ω('#button').on('click', ()=>{
Ω('document').extendcss(parent, child);
});

.parent{
background-color: teal;
color: yellow;
}

<script src="https://obnoxiousnerd.github.io/custags.js/custags.min.js"></script>
<h1 class = "parent">Parent</h1>
<h1 class = "child">Child</h1>
<button id="button">Give child some css</button>

【讨论】：