是否有任何 CSS 规则在设置为空字符串时覆盖低特异性规则

Question

我试图通过考虑内联和 class 样式来确定哪种样式适用于元素。 Javascript将这两个都解析成对象，但是没有设置的样式是空字符串，不是undefined。如果 "empty"（例如 width:;）的样式没有效果，无论规则多么具体，那么我的目标都是微不足道的。

但是，为了用默认规则动态覆盖 display:none，我知道 document.getElementById('ele').style.display = ''; 有效，但我知道它实际上并没有添加 display 内联样式，在 CSS 中设置为空时是否有任何样式会产生影响？如果是这种情况，我将不得不手动解析样式和样式表字符串以查看是否定义了属性。

Answer 1

在样式表或样式声明块中写入 display:; 或 display:''; 是无效声明。

元素的style属性是另一回事。这是一种设置和获取元素内联样式的便捷机制。设置一个值实际上是 shorthand for .setProperty 并获得一个 shorthand for .getPropertyValue.

<div></div>

=>
element.style.display == ''
element.getPropertyValue('display') == null

由于没有设置内联样式，因此 display 没有值，所以 getPropertyValue('display') returns null.

既然我们知道 .display 是 .getPropertyValue('display') 的缩写，让我们看看 specification 对返回值的说明：

Returns the value of the property if it has been explicitly set for this declaration block. Returns the empty string if the property has not been set

所以空字符串等于没有值。

element.style.display = 'none'

=>
<div style="display: none;"></div>
element.getPropertyValue('display') == 'none'

如您所见，我们可以使用 .style 轻松设置内联样式。如果我们现在尝试设置一个无效值，它将被忽略：

element.style.display = 'foo'

=>
<div style="display: none;"></div>
element.getPropertyValue('display') == 'none'

没有任何变化。将值设置为空字符串是可行的，因为它等同于没有样式：

element.style.display = ''

=>
<div></div>
element.getPropertyValue('display') == null

将 display 设置为 null 也可以。

是否有任何 CSS 规则在设置为空字符串时覆盖低特异性规则

Are there any CSS rules that, when set to empty strings, override lower-specificity rules

javascript

css

css-specificity