CSS属性visibility: hidden被忽略 嵌套screen元素样式异常问题

这不是浏览器Bug，是你对visibility属性的工作原理理解有误，该表现属于CSS标准的预期行为。

原理说明 #

visibility是可继承属性，但父元素的visibility: hidden不会限制子元素的显式可见声明，规则如下：

• 父元素设置visibility: hidden时，自身默认不可见，同时会将hidden作为默认属性值继承给所有后代元素
• 若后代元素显式声明visibility: visible，会直接覆盖继承来的hidden值，正常渲染显示，不受父元素隐藏状态影响

这和display: none、opacity的逻辑有本质区别：display: none的元素及所有后代都不会参与渲染，无法被子元素覆盖；父元素设置小于1的opacity时，所有后代的透明度都会基于父元素值叠加，无法单独设置为完全不透明。

适配你需求的解决方案 #

你需要的嵌套屏幕逻辑是「只有从根节点到当前节点的所有层级.screen都带有.pt-page-current类时，当前屏幕才可见」，可以根据动画需求选择对应方案：

方案1：用opacity实现（推荐，过渡逻辑更简单） #

可以完美支持切换过渡，且自动满足嵌套显隐逻辑，父元素透明时后代无法单独显示：

.screens > .screen {
  opacity: 0;
  pointer-events: none; /* 避免隐藏的屏幕响应点击等交互 */
  transition: opacity 0.3s ease; /* 可根据需求调整过渡时长和曲线 */
}
.screens > .screen.pt-page-current {
  opacity: 1;
  pointer-events: auto;
}

方案2：坚持用visibility实现（保留隐藏元素的布局占位） #

调整选择器匹配逻辑，只有祖先链存在激活类的当前屏幕才会被设为可见：

.screens > .screen {
  visibility: hidden;
  transition: visibility 0.3s ease;
}
.pt-page-current.screen,
.pt-page-current .screen.pt-page-current {
  visibility: visible;
}

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