为何父div设为display:none后，子元素display:block不生效？

你之前的方法无效的核心原因是：当父元素.main被设置为display:none时，它的所有后代元素都会被完全从渲染树中移除，此时无论给子元素设置display:block还是!important都无法让它们显示——因为父元素本身已经不渲染了。

要实现“仅保留.fruits类div中的图片，隐藏其他所有元素”的需求，你可以通过「给父元素添加状态类+CSS选择器排除目标元素」的方式来实现，具体步骤如下：

1. 基础HTML结构示例 #

假设你的页面结构大致如下：

<div class="main">
  <!-- 需要隐藏的元素 -->
  <h1>页面标题</h1>
  <p>一些描述文本</p>
  <div class="other-box">其他内容区块</div>
  
  <!-- 需要保留的图片所在容器 -->
  <div class="fruits">
    <img src="apple.png" alt="苹果" class="apple-trigger">
    <img src="banana.png" alt="香蕉">
    <img src="orange.png" alt="橙子">
  </div>
</div>

2. 编写控制样式的CSS #

添加一个状态类（比如.show-only-fruits-img），通过这个类来控制元素的显示/隐藏：

/* 默认状态下所有元素正常显示 */
.main * {
  display: initial;
}

/* 添加状态类后，隐藏.main下的所有元素 */
.main.show-only-fruits-img * {
  display: none;
}

/* 重新显示.fruits容器中的所有图片 */
.main.show-only-fruits-img .fruits img {
  display: inline-block; /* 或block，根据你的布局需求调整 */
}

3. 编写点击事件的JavaScript #

给苹果图片绑定点击事件，切换状态类的存在：

// 获取苹果图片元素
const appleImg = document.querySelector('.apple-trigger');
// 获取.main容器
const mainContainer = document.querySelector('.main');

// 绑定点击事件
appleImg.addEventListener('click', function() {
  // 切换状态类——点击一次显示仅水果图片，再点击恢复原状
  mainContainer.classList.toggle('show-only-fruits-img');
});

补充说明 #

• 如果需求是“点击后永久隐藏其他元素，不需要恢复”，可以把classList.toggle换成classList.add；
• 如果.fruits容器内还有其他非图片元素需要隐藏，可以在CSS中补充：.main.show-only-fruits-img .fruits *:not(img) { display: none; }，确保仅保留图片；
• 这种方法的优势是通过CSS控制样式，性能比JavaScript遍历DOM元素更高，代码也更简洁。

内容的提问来源于stack exchange，提问作者Diamoniner12345