所有HTML元素都允许使用所有CSS规则，并且可以全部继承吗？

Question

鉴于某些CSS规则是为特定的HTML元素量身定制的（一些示例-object-fit，<img>等的<video>； stroke，fill和各种SVG元素的其他SVG规则），然后执行在其他元素上使用时，这不是很有意义，将任何valid CSS规则应用于任何HTML元素是否仍然合法？此外，可以继承任何规则吗？

我的具体问题是这个。我正在使用模块化CSS开发按钮组件。在此按钮内，我可能具有用于显示图标的SVG元素。我希望能够从组件外部将某些样式应用于图标（即笔触和填充），同时保留适当的封装（因此，深层选择器是禁止的）。

为了解决该问题，我将SVG设置为继承按钮的笔触和填充。如果现在将这些属性应用于按钮，则图标会继承它们，并且会得到所需的结果！

但是，这让我想知道我正在做的事情是否有效以及其他浏览器的行为是否相同。

这似乎是常识，但是很难找到一个明确的答案。如果有人可以指出规范摘录，甚至是一些支持表格，我也会很高兴的！

---

鉴于我如何编写代码，显示100％准确的示例有点太多，但是基本上我在问这是否有效：

.icon {
  stroke: inherit;
  fill: inherit;
}

.button {
  stroke: #FFF;
  fill: #999;
}

<button class="button">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
    <g stroke-width="2" transform="translate(1 1)">
      <path d="M14 2L2 14"/>
      <circle cx="8" cy="8" r="8"/>
    </g>
  </svg>
  <span>My button</span>
</button>

Answer 1

将有效的CSS规则应用于任何HTML元素是否仍然合法？