将有效的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范围的关键字值:initial
,inherit
和unset
。
该规范实际上是在说任何属性都可以使用inherit
作为其值,因此问题的答案是是。但是,重要的细节是如何确定继承的值。正如Temani已经指出的那样,它并不像看起来那样简单。
如何计算继承值?
CSS级联和继承级别3规范:https://www.w3.org/TR/css-cascade-3/是有关级联和继承的很好的读物。它指出:
元素上属性的继承值是元素父元素上属性的计算值。
根据规范,这是确定任何元素上任何属性的计算值的过程的简化版本:
-
为元素上的属性收集所有声明的值-即在开发人员样式表和样式属性,用户代理样式表等中找到的所有相关且有效的CSS声明。
-
确定级联值-所有声明值的获胜值(这是规则的优先级,单个规则排在最前面)。
-
如果没有级联值,则如果继承了属性,请使用继承的值。
-
如果该属性未继承(请参阅此问题,以获取默认继承的属性列表:Which CSS properties are inherited?),请使用初始值。每个属性都有一个根据规范的初始值(例如,初始font-size
为medium
;值得注意的是,它不是绝对值,例如16px
!)。
-
这时,属性 将 分配了 some 值,但可能是一个相对值,即取决于其他CSS属性(例如,百分比值取决于某个绝对值,例如父级的绝对尺寸)。在此步骤中,将尽可能解析一个值,以使该值清晰且 准备继承 。
重要的是要注意,就像规范为每个属性定义一个初始值一样,它还定义了如何导出计算值。例如。 MDN将此计算值指定为font-size:
已指定,但相对长度已转换为绝对长度
因此medium
保留为medium
,但是1.2em
变成19.2px
(如果父母的字体大小为16px
)。
重要的一点
同一级联和继承规范指出:
即使该属性不适用(如“适用于”行所定义),计算值仍然存在。但是,某些属性可能会根据属性是否适用于元素而改变其确定计算值的方式。
因此,每个元素对每个属性都有一个计算值,但可能不会使用(所谓的使用值是计算值之后的下一步,为none)。计算值就是将要继承的值。
这对于我的SVG按钮示例意味着什么:
- 我绝对可以在
stroke
上设置fill
和<button>
。呈现自身时,它将忽略此属性,但会根据需要将其传递给其子级。
- 默认情况下,子SVG会继承这些属性 (我什至无需明确指定)。
-
stroke
和fill
的计算值没有任何警告,因此我可以期望继承正确的颜色(而且是!)。
本文链接:https://www.f2er.com/2572022.html