将某种样式应用于所有子元素答案

【问题标题】：Applying a certain style to all child elements将某种样式应用于所有子元素
【发布时间】：2018-03-16 09:23:10
【问题描述】：

所以我有一个名为“svg”的标签，每当我点击一个按钮时，它的“visibility”属性都会获得“hidden”值（这是一个在包含它的“div”上工作的切换，svg 只有继承）。现在，这个“svg”元素实际上有数百个子标签（“g”标签），其中大部分，由于我不打算解释的原因，在它们的属性中覆盖了“visibility:visible”。

我一个一个地手动编辑了所有这些（查找和替换），但这有点麻烦。难道没有我可以使用的命令或函数，以便某个标记（在本例中为“svg”）的所有子元素都具有属性“visibility:inherit”吗？

【问题讨论】：

欢迎来到 SO。请访问help center 了解询问内容和方式。提示：发布工作和代码
欢迎来到 SO。请自行尝试。该社区旨在帮助人们在实际实施中遇到困难。

标签： javascript html css visibility

【解决方案1】：

你可以选择：

svg * {
   visibility:inherit!important;
}

!important 在那里非常重要，因为如果某些<g> 具有内联样式，这将给予该样式更高的优先级。

但我不确定所有的 svg 元素都会接受这个属性，svg 元素的样式与其他元素有点不同。

如果您想直接将其应用为内联样式，则必须使用 jQuery，如下所示。

$('svg *').each(function() {
  $(this).css('visibility','inherit');
})

【讨论】：

是的，第一个成功了！ g *{ 可见性：继承！重要； } SVG * { 可见性：继承！重要； } div { 可见性：继承； }
它可能被否决了，因为它不是一个好的答案。将 !important 与 * 一起使用会强制将该属性提供给元素下的所有内容，这不是一件好事。特别是使用“继承”，这看起来很奇怪，但我还没有真正看过这个问题。您的回答可能“有效”，但可能不是一个好的解决方案。