Question

我在html5boilerplate中找到了这样的代码：

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
  display: none;
}

什么地址？它有什么影响？隐藏属性的元素如下例所示？

<div hidden></div>

Answer 1

是的，完全像你的例子。选择器将匹配具有hidden属性的任何元素（在属性选择器之前有一个隐含的通用选择器）。

hidden属性是HTML规范的新增功能，因此在旧版浏览器中不受支持。通过将该规则添加到样式表，您可以有效地填充该属性的本机行为（显然，隐藏元素，类似于设置display: none）。

IE6中的“已知问题”是由于它不支持属性选择器。

Answer 2

隐藏是HTML5中的一个属性

阅读详细说明here。另请阅读一个很好的解释here

该评论似乎表明，CSS解决方案是为了解决默认情况下与新隐藏行为不兼容的浏览器

Answer 3

您还可以使用前缀“data-”创建自己的属性。例如，Jquery Mobile使用它。

示例：

您的HTML

<div data-role="header" data-position="top">
   // content here
</div>

你的CSS

[data-role=header] 
{
     font-family:arial;
     font-size:20px;
}

[data-position=top]
{
     top:5px;
}

有一个很好的解释here。