是否所有HTML元素都允许所有CSS规则,并且它们都可以被继承吗?

鉴于某些CSS规则是针对特定HTML元素量身定制的(一些示例-object-fit代表<img><video>等; strokefill以及用于各种SVG元素的其他SVG规则),并且在其他元素上使用时并没有什么意义:

  1. 将任何 valid CSS规则应用于任何HTML元素是否合法?
  2. 可以继承任何规则吗?
  3. 继承值是什么,尤其是在从某个元素继承而使用特定属性没有意义的情况下?

我的具体问题是这个。我正在开发带有模块化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>

heyu193 回答:是否所有HTML元素都允许所有CSS规则,并且它们都可以被继承吗?

将有效的CSS规则应用于任何HTML元素仍然合法吗?

是的,但是如果不支持或不适用于该元素,浏览器可能会将其忽略。

此外,可以继承任何规则吗?

是的,但是您应该注意,继承要考虑计算值,这会有所作为:

Inherit CSS关键字使指定的元素采用其父元素的属性计算值。可以应用于任何CSS属性,包括所有CSS速记。 ref

我没有关于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的display等于block而不是inline-block的原因,因为float会强制.box的display的计算值被阻塞>

为避免处理继承问题,您可以根据情况考虑使用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>

,

Temani的回答非常有帮助,并为我指明了正确的方向。经过一番研究,我认为我现在可以针对我自己的问题发布更为详尽和正确引用的答案。

将有效的CSS规则应用于任何HTML元素合法吗?

是的。 CSS2.1规范中对此进行了明确说明:https://www.w3.org/TR/CSS2/about.html#applies-to(CSS3是CSS2.1的基于模块的向后兼容扩展,因此仍然适用)。它说:

所有元素都被视为具有所有属性,但是某些属性对某些类型的元素没有渲染效果。例如,“ clear”属性仅影响块级元素。

所有元素都被认为具有所有属性隐式意味着可以在任何元素上设置任何属性。

某些属性对某些元素没有呈现效果意味着在 rendering 时某些元素只是忽略某些属性(这并不意味着它们无法继承,请继续阅读。)

可以继承任何规则吗?

要回答此问题,让我们看一下CSS值和单位模块第3级规范:https://www.w3.org/TR/css3-values/#common-keywords。它指出:

所有CSS属性还接受全CSS关键字值作为其属性值的唯一组成部分。

共有3种CSS范围的关键字值:initialinheritunset

该规范实际上是在说任何属性都可以使用inherit作为其值,因此问题的答案是。但是,重要的细节是如何确定继承的值。正如Temani已经指出的那样,它并不像看起来那样简单。

如何计算继承值?

CSS级联和继承级别3规范:https://www.w3.org/TR/css-cascade-3/是有关级联和继承的很好的读物。它指出:

元素上属性的继承值是元素父元素上属性的计算值。

根据规范,这是确定任何元素上任何属性的计算值的过程的简化版本:

  1. 为元素上的属性收集所有声明的值-即在开发人员样式表和样式属性,用户代理样式表等中找到的所有相关且有效的CSS声明。

  2. 确定级联值-所有声明值的获胜值(这是规则的优先级,单个规则排在最前面)。

  3. 如果没有级联值,则如果继承了属性,请使用继承的值

  4. 如果该属性未继承(请参阅此问题,以获取默认继承的属性列表:Which CSS properties are inherited?),请使用初始值。每个属性都有一个根据规范的初始值(例如,初始font-sizemedium;值得注意的是,它不是绝对值,例如16px!)。

  5. 这时,属性 分配了 some 值,但可能是一个相对值,即取决于其他CSS属性(例如,百分比值取决于某个绝对值,例如父级的绝对尺寸)。在此步骤中,将尽可能解析一个值,以使该值清晰且 准备继承

    重要的是要注意,就像规范为每个属性定义一个初始值一样,它还定义了如何导出计算值。例如。 MDN将此计算值指定为font-size:

已指定,但相对长度已转换为绝对长度

因此medium保留为medium,但是1.2em变成19.2px(如果父母的字体大小为16px)。

重要的一点

同一级联和继承规范指出:

即使该属性不适用(如“适用于”行所定义),计算值仍然存在。但是,某些属性可能会根据属性是否适用于元素而改变其确定计算值的方式。

因此,每个元素对每个属性都有一个计算值,但可能不会使用(所谓的使用值是计算值之后的下一步,为none)。计算值就是将要继承的值。

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

  1. 我绝对可以在stroke上设置fill<button>。呈现自身时,它将忽略此属性,但会根据需要将其传递给其子级。
  2. 默认情况下,子SVG会继承这些属性 (我什至无需明确指定)。
  3. strokefill的计算值没有任何警告,因此我可以期望继承正确的颜色(而且是!)。
本文链接:https://www.f2er.com/2572022.html

大家都在问