CSS *：不是（img）不工作

Question

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

这段代码：

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

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

怎么了？

Answer 1

正如在评论中看到的那样，这将使图像的容器消失，从而也使图像消失。所以这里有另一个想法来实现你想要的：

你创建一个覆盖整个页面的覆盖层用一个大的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>

Answer 2

每个图像都在一些其他元素内，例如一个div甚至只是body。当你将这些元素设置为display: none时，它们的内容也会被隐藏，这就是一切。