Chrome devtools 在同一行报告相同的 CSS 两次

Question

Chrome DevTools 在同一行报告相同的 CSS 两次。还有其他人看到这个吗？我该如何解决？

stable (40) 和 Canary (42) 都会出现这个问题

style.css 正好被加载一次。它没有缩小。

Answer 1

这里有几个选项：

您可能包含了两次样式表

如果不是这种情况（您没有使用预处理器或缩小），我怀疑您是否包含了对同一文件的两个引用。 对此使用查看源代码 - 在网络选项卡中，它们将显示为同一文件。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="test.css" />
    <link rel="stylesheet" href="test.css" />
</head>
<body>
    <h2 class="title">Title</h2>
</body>
</html>

CSS

h2.title {font-size: 30pt; color: #24a222; }

结果

您可能在同一行上声明了两次 h2.title。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        h2.title {font-size: 30pt; color: #24a222; }h2.title {font-size: 30pt; color: #24a222; }
    </style>
</head>
<body>
    <h2 class="title">Title</h2>
</body>
</html>

Chrome devtools 在同一行报告相同的 CSS 两次

Chrome devtools reporting the same CSS on the same line twice

css

google-chrome-devtools

您可能包含了两次样式表

HTML

CSS

结果

您可能在同一行上声明了两次 h2.title。