链接样式表未应用新的CSS定义

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 */
}

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

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

两种情况

您的lessons.js正在使用.tests做某事

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

您的css集.tests很重要，因此您无法更改

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

Answer 3

问题在于您的旧样式由于缓存而被使用。 您的新样式不会显示，因为浏览器正在使用旧样式。 有几种方法可以解决或更改此问题。

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

lessons-matching-test-v1.css

每次进行更改时，以这种方式命名css文件将允许使用和缓存该新版本。 在以前的版本中，您会增加数字，因此版本2将是lessons-matching-test-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 个解决方案

解决方案1
2 已采纳 2013-03-15 23:33:58

解决方案2
1 2013-03-15 23:42:43

解决方案3
1 2013-03-15 23:44:03

链接样式表未应用新的CSS定义

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-03-15 23:33:58

解决方案2 1 2013-03-15 23:42:43

解决方案3 1 2013-03-15 23:44:03

解决方案1
2 已采纳 2013-03-15 23:33:58

解决方案2
1 2013-03-15 23:42:43

解决方案3
1 2013-03-15 23:44:03