Javascript 启动屏幕不工作

我正在尝试制作一个在4秒钟后消失的闪屏。我试图通过JS将“display none”类添加到“splash”类中来实现这一点，但是没有添加该类，因此仍然显示启动屏幕。以下是问题的代码笔：

///HTML
///无礼
.飞溅{
宽度：100%；
高度：100vh；
背景色：#a9aaff；
位置：固定；
排名：0；
左：0；
z指数：2；
显示器：flex；
对齐项目：居中；
证明内容：中心；
.显示无{
显示：无；
};
img{
宽度：12.5%；
}
}
@关键帧淡入淡出{
到{
不透明度：1；
}
}
.淡入{
不透明度：0；
动画：fadeIn 1s轻松前进；
}
///JS
const splash=document.querySelector（'.splash'）；
document.addEventListener（'DOMContentLoaded'，（e）=>{
设置超时（（）=>{
splash.classList.add（'display-none'）；
}, 4000);
});'

这个问题与css定义有关

.splash {
    .display-none {}
}

这种css样式意味着，找到类为

.splash

的元素，然后找到它的子元素，该子元素具有

。显示none

类，并根据样式定义对其进行样式设置。您可能希望将

SASS

代码更改为此，使其成为一种全局样式可以解决此问题：

.display-none {
    display: none;
}
.splash {
...

或者您有一个选项使其成为

.splash。使用
和
关键字显示none
，如下所示：

.splash {
/* Your style...*/
    &.display-none {
        display: none;
    }

}

.classname1中的
和.classname2
等于
.classname1.classname2
css语法

以下是一个例子：

.classname1 {
    &.classname2 {
    /*style...*/
    }
}

在css中，您可以这样写：

.classname1.classname2{
/*风格*/
}

这可以描述为“找到具有
.classname1
和
.classname2
的元素，并相应地设置样式”

我希望这有帮助！：D
看着你的代码笔，你的JS看起来很好，因为我确实看到了添加的类。如果从“display none”类后面删除分号，它将起作用。
编写SCS的方式是将CSS呈现为

.splash .display-none {
  display: none;
}

两个选择器之间的空间很大

后代组合子-通常由单个空间表示(
)字符-组合两个选择器，使元素与
如果第二个选择器具有祖先（父级、，
父对象的父对象、父对象的父对象的父对象等）元素与
第一选择器。使用子代组合符的选择器是
称为后代选择器

（来自
https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator
）因此，正如其他人所指出的，您需要分离出display none类的定义。呈现的CSS需要如下所示：

.splash.display-none {
  display: none;
}

这个答案对你有用吗？
.splash.display-none {
  display: none;
}