-1

在文件的头部：

<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 时我的样式没有被应用？

4

3 回答 3

2

当我创建一个新的 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 文件时会发生什么？

于 2013-03-15T23:33:58.030 回答
1

两种情况

  1. 您的课程.js 正在使用 .tests 做一些事情

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

  2. 您的 css 将 .tests 设置为重要，因此您无法更改

    <link   type="text/css" rel="stylesheet" href="css/resources/css/lessons-matching-test.css"/>
于 2013-03-15T23:42:43.850 回答
1

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

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

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"

于 2013-03-15T23:44:03.727 回答