时间戳

首页 > 解决方案 > 为什么这个类在单独的文件中不起作用？

html - 为什么这个类在单独的文件中不起作用？

问题描述

起源：

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

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

我注意到我在这个文件中的所有代码都可以工作，除了这个类，它只有在我放入<style>page.html 的一部分时才有效。

有问题的班级：

.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 中。现在它可以工作了。

但我会明白为什么。你知道一个网站可以很好地解释这些事情吗？

标签： htmlcss

解决方案

<video>和等元素<audio>不支持类属性。

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

希望这会有所帮助。

推荐阅读