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

【问题标题】：Are there any CSS rules that, when set to empty strings, override lower-specificity rules是否有任何 CSS 规则在设置为空字符串时会覆盖低特异性规则
【发布时间】：2015-07-12 16:00:32
【问题描述】：

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

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

【问题讨论】：

document.getElementById('ele').style.display = ''; 有效，因为您将display:none; 设置为display:;，这是无效的，因此浏览器会忽略display:;，只使用默认显示值。对于<div>，默认值为display: block，对于<span>，默认值为display: inline;。
JavaScript 不解析任何东西，.style 是内联样式，属性的默认值为空字符串，表示“此属性没有内联样式” .
width:; 是一个语法错误，无论发生在哪里都会被忽略。 elt.style.display = ''; 不会将display 属性的值设置为空字符串，而是删除display 属性。
澄清一下，如果你说“空字符串”，你的意思不是''，对吧？我的意思是，content:'' 是一个有效的样式属性。还有像border 这样的速记属性。规范说所有值都是可选的；省略宽度意味着0，省略样式意味着none，省略颜色意味着currentColor。换句话说，border:; 将意味着 border:0 none currentColor; 虽然它没有说明这是否有效。
@MrLister 正确，我的意思是在: 和; 之间什么都不放。您提出了一个有趣的观点，但是当设置类样式时，border:; 与 border:0 none currentColor; 不一样（JSFiddle）

标签： javascript css css-specificity

【解决方案1】：

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

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

<div></div>

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

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

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

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

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

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

【讨论】：