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

Question

我试图通过考虑内联样式和类样式来确定哪种样式适用于元素。Javascript 将这两者解析为对象，但未设置的样式是空字符串，而不是undefined. 如果“空”样式（例如width:;）没有任何效果，无论规则多么具体，那么我的目标就微不足道了。

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

Answer 1

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

style元素的属性则是另一回事。这是一种设置和获取元素内联样式的便捷机制。设置值实际上是 的简写.setProperty，获取值是 的简写.getPropertyValue。

<div></div>

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

由于未设置内联样式，因此没有值display，因此getPropertyValue('display')返回null。

现在我们知道了 的.display缩写，让.getPropertyValue('display')我们看看规范中关于返回值的说明：

如果已为此声明块显式设置该属性的值，则返回该属性的值。如果尚未设置属性，则返回空字符串

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

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也可以。