css - HTML5 隐藏属性与 Bootstrap 不兼容

Question

我正在重构一些代码并决定更改通常的 style="display:none" 以使用 HTML5 hidden 属性，以隐藏按钮。才发现和bootstrap的btn类不兼容。也就是说，我会继续使用 style display 属性，但我想知道这是一个应该报告的错误，还是只是一个每个人都应该知道的功能。

可以找到对应的jsfiddle here

Answer 1

HTML5 规范已经就此警告开发人员:

Note: Because this attribute is typically implemented using CSS, it's also possible to override it using CSS. For instance, a rule that applies 'display: block' to all elements will cancel the effects of the hidden attribute. Authors therefore have to take care when writing their style sheets to make sure that the attribute is still styled as expected.

— The HTML5 Specification - 7.1 The hidden attribute

您遇到的问题是 Bootstrap 的 .btn 选择器专门定义了 display: inline-block，它覆盖了 hidden 属性的 显示:无。

这意味着特异性将成为一个问题。这是极少数情况下可能需要 !important。我会亲自实现以下样式规则:

[hidden] {
  display: none !important;
}

这确保了所有具有hidden 属性的元素都将被设置为不显示，无论其具体性如何。这是双重好处，因为这将使 hidden 属性在任何支持 [att] 选择器符号(支持 CSS2 的浏览器)的浏览器上有效。

---

Working JSFiddle demo .