为什么我不能覆盖通过星号应用的显示属性？答案

【问题标题】：Why can't I override display property applied via an asterisk?为什么我不能覆盖通过星号应用的显示属性？
【发布时间】：2014-10-16 12:13:58
【问题描述】：

我想以某种屏幕分辨率隐藏所有元素，只显示想要的元素可见：

例如：

*{
    display: none;
}
#block{
    display: block !important;
}

但这不会再覆盖显示属性。 demo

【问题讨论】：

【解决方案1】：

* 定位文档中的所有元素，包括html 和body。这就是内容仍然隐藏的原因 - verify that。

如果你想选择<body> 中的所有元素，你应该这样做：

body * {
    display: none;
}

#block {
    display: block;
}

&lt;div id="block"&gt;block&lt;/div&gt;

【讨论】：

@Paulie_D 确实！我只是专注于选择器。
当我只想在页面上打印 chart.js 图表时，这对我来说很好；我通过这个问题回答了这个问题：stackoverflow.com/questions/37192878/chart-from-chart-js-to-pdf（使用媒体打印仅打印图表）。

【解决方案2】：

因为body 和html 包含在通用选择器* 中，它具有display: none; 规则。

【讨论】：

【解决方案3】：

如果你用你最喜欢的 DOM 检查器打开目标框架，你会看到 <body> 仍然隐藏：

【讨论】：