所有 CSS 规则都允许用于所有 HTML 元素吗？它们都可以继承吗？

Question

鉴于某些 CSS 规则是针对特定 HTML 元素量身定制的（一些示例 - object-fitfor <img>、<video>等；stroke以及fill针对各种 SVG 元素的其他 SVG 规则），并且在用于其他元素时不太有意义：将任何有效的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 元素仍然合法吗？

是的，但如果它不受支持或不适用于此类元素，您的浏览器可能会忽略它。

而且，任何规则都可以继承吗？

是的，但您应该注意，继承会考虑计算值，这可能会产生影响：

继承 CSS 关键字使指定它的元素从其父元素获取属性的计算值。它可以应用于任何CSS属性，包括所有的CSS简写。

我没有与 SVG 相关的简单示例，但这是另一个示例：

.box {

  display:inline-block;

  float:left;

  width:200px;

  height:200px;

  border:1px solid red;

}

.box > div {

  display:inherit;

  border:1px solid green;

}

<div class="box">

  <div>text</div>

</div>

注意内部 div 的displayequal toblock和 notinline-block因为 float 会强制显示的计算值被 block for.box

为了避免处理继承问题，您可以考虑适合您情况的 CSS 变量：

.icon {

  stroke: var(--s);

  fill: var(--f);

}

.button {

  --s: #FFF;

  --f: #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 2

相同的级联和继承规范指出：

即使属性不适用（如“适用于”行所定义），计算值也存在。但是，某些属性可能会根据属性是否适用于元素来更改确定计算值的方式。

因此，每个元素的每个属性都会有一个计算值，但可能不使用它（所谓的使用值，即计算值之后的下一步，是无）。计算出的值将被继承。

这对于我的 SVG 按钮示例意味着什么：

1. 我绝对被允许设置stroke和。它在渲染自身时会忽略此属性，但如果需要，会将其传递给其子级。fill<button>

2. 默认情况下，子 SVG 将继承这些属性（我什至不需要明确指定）。

3. stroke和 的计算值fill没有任何警告，因此我可以期望继承正确的颜色（确实如此！）。