Question

我搜索了各种来源，所有人都在说同样的事情。

此代码：

*:not(img) {
display: none;
}

应该隐藏除图像之外的所有内容。但它也隐藏了图像。

怎么了？

Answer 1

每张图片都是其他元素的内部，例如一个div甚至只是body。当您将这些元素设置为display: none时，其内容也会被隐藏，而且这些内容都是隐藏的。

Answer 2

正如评论中所见，这将使图像容器消失，因此图像也会消失。所以这是实现你想要的另一个想法：

您创建了一个覆盖整个页面的覆盖图，其中包含较大的z-index，然后您使用更大 positon:relative制作图像z-index：

/* The normal CSS of the page */

body {
  margin: 0
}

.box {
  width: 200px;
  margin: 0 auto;
}

.box-2 {
  display: inline-block;
  padding: 20px;
}

img {
  max-width: 100%;
}


/* The CSS to keep only the images*/

body:after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  background:#fff;
}

img {
  position: relative;
  z-index: 9999999;
}

<div class="box">
  <img src="https://lorempixel.com/400/400/"> some text
</div>

<div class="box-2">
  <img src="https://lorempixel.com/400/400/"> some text
</div>
<p>lorem ipsum lorem ipusme lorem ipsum lorem ipusme lorem ipsum lorem ipusme</p>

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

CSS *：不是（img）不工作

2 个答案: