Question

原点：

我正在建立一个新页面，其中第一部分<video>标签必须占据整个屏幕。

我通常创建自己的stylesheet.css文件，在其中放置所有样式代码。

我注意到该文件中的所有代码都可以正常工作，但该类除外，该类仅当我将其放入page.html的<style>部分时有效。

相关课程：

.starsfalling {
  z-index: 0;
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
    </head>
    <body>
        <video class="starsfalling" autoplay loop muted>
            <source src="media/fallstars.mp4" type="video/mp4"/>
        </video>
    </body>
</html>

为什么此类不能在单独的文件中工作。没有什么可以干扰。

编辑1：

感谢@ Shelby115

我注意到chrome正在覆盖此CSS类。为什么？我已将此类中的！important元素放在一边，但它仍然无法正常工作。

编辑2：

由于chrome 52或更高版本以不同的方式管理文档流，因此我已经阅读了有关此问题的信息，因此，为了解决此问题，我将.starsfalling放入了具有相对位置的div中。现在可以了。

但是我会明白为什么。您知道一个可以解释这些问题的网站吗？

Answer 1

<video>和<audio>之类的元素不支持 class 属性。

选中此项以查看<video>元素支持的属性： https://html.spec.whatwg.org/multipage/media.html#the-video-element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

希望这会有所帮助。

Answer 2

可能是在HTML代码中，在文件之后，另一个css文件被加载，其中包含相同的类名但样式不同。

Answer 3

仔细检查以下内容：

检查您的链接：<link rel="stylesheet" href="yourcssfile.css">
检查班级名称。
检查是否有重要的几个 CSS属性。
检查是否还有其他来源的CSS 像CDN。

为什么在单独的文件中此类不能工作？

3 个答案: