Question

在文件的头部：

<link type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>

在文件正文中

<div class="tests">
  <a href="" style="display: block;">Link</a>
</div>

在链接的css样式表中，我添加了这个新样式

.tests
{
     background-color: blue;
     /* some stuff */
}

为什么在将class=tests添加到我的div时，我的样式不会被应用？

Answer 1

当我创建一个新的HTML文件并插入你的代码（没有外部的css和js文件）时，我得到了预期的结果。

<!DOCTYPE html>
<html lang="en"><!-- Forgot the quotes -->
<head>
    <meta class="metatype" content="matching-test">
    <meta charset="UTF-8">
    <style type="text/css">
        .tests
        {
             background-color: blue;
             /* some stuff */
        }
    </style>
</head>
<body>
    <div class="tests">
        <a href="" style="dispaly: block;">Link</a>
    </div>
</body>
</html>

排除js文件和/或css文件后会发生什么？

Answer 2

两个案例

你的课程.js正在用.tests

做些什么

<script type="text/javascript" src="js/resources/js/libs/lessons.js"></script>

您的css设置。测试非常重要，因此您无法更改

<link   type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>

Answer 3

问题是由于缓存而使用旧样式。您的新样式不会显示，因为浏览器使用旧样式。有几种方法可以修复或改变它。

避免这种情况的技术称为“缓存破坏”。当涉及服务器端处理程序时，可以用更高的语言处理。但如果没有访问权限，则通常会使用版本名称。

lessons-matching-test-v1.css

每次进行更改时，以这种方式命名css文件将允许使用和缓存新版本。在版本中，你会增加数字，因此版本2将是课程匹配 - 测试-v2.css。

另一种方法是每次创建新版本时将查询字符串附加到路径

href="css/resources/css/lessons-matching-test.css?v=1.0"

然后每次创建新版本时，更改查询字符串，因此版本2将为href="css/resources/css/lessons-matching-test.css?v=2.0"

新的css定义不会从链接的样式表中应用

3 个答案: