Question

我遇到了一个奇怪的问题。我有3个名为＃page1，＃page2和＃page3的div。我已经将css样式应用于它们，尽管#page1 id仅在我写出两次时才适用。

例如，

#page1{
background-color:rgb(27, 163, 156);
height: 100vh;
}

不适用于该类，但如果我再次添加它，如：

#page1{
background-color:rgb(27, 163, 156);
height: 100vh;
}

#page1{
    background-color:rgb(27, 163, 156);
    height: 100vh;
}

然后它工作正常，起初我以为我拼错了一些东西，虽然它在复制和粘贴时起作用。

这是完整的html和css，我看不出是什么导致了这一点，感谢您的评论！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1 page scroll test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <div id="page3"></div>
</body>
</html>

body {
    margin:0;
}

#page1{
    background-color:rgb(27, 163, 156);
    height: 100vh;
}

#page2{
    background-color:rgb(134, 226, 213);
    height: 100vh;
}

#page3{
    background-color:rgb(101, 198, 187);
    height: 100vh;
}

Answer 1

您的代码缺少<style>标记。此外，该样式应位于head部分或body部分。

结帐this DEMO

Answer 2

我预测如果你检查你的CSS，你会看到错误之前你的规则，这导致CSS吞下规则。一旦错误规则被传递，那么下一个规则（您的副本）将被正确处理。

Answer 3

有点奇怪的一个，在jfiddle上尝试它并且它工作正常所以我重写它与新的css / html文件完全一样，它现在工作正常，感谢评论家伙非常感谢！< / p>

CSS仅在我写两次时应用

3 个答案: