Html CSS仅在我编写两次时应用_Html_Css

Html CSS仅在我编写两次时应用

html css

Html CSS仅在我编写两次时应用,html,css,Html,Css,我遇到了一个奇怪的问题。我有三个分区，分别是第1页、第2页和第3页。我已经对它们应用了css样式，尽管只有在我写了两次之后才应用了#page1id 例如不应用该类，但如果我再次添加它，如： #page1{ background-color:rgb(27, 163, 156); height: 100vh; } #page1{ background-color:rgb(27, 163, 156); height: 100vh; } 然后它工作得很好，起初我认为我拼错了一些东西

我遇到了一个奇怪的问题。我有三个分区，分别是第1页、第2页和第3页。我已经对它们应用了css样式，尽管只有在我写了两次之后才应用了#page1id

例如

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

#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>

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

您的代码缺少

标记。此外，样式应位于

头部

部分或

正文

部分

签出

好的，有点奇怪，在JFIDLE上试用过，效果很好，所以我将它完全一样重新写入了一个新的css/html文件，现在效果很好，非常感谢大家的评论

提供html代码！这实际上不是一门课，而是一种风格，但我明白你的意思。尽管如此，我看不出有什么理由。你能缩小你的代码范围，并在JSFIDLE中重现这种行为吗？提供代码来得到答案。我不认为你的CSS或HTML是错误的。我认为答案更多地取决于你的环境。您在哪个浏览器中查看您的网站？其他页面也有同样的问题吗？但是你没有把样式标签放在CSS文件中。他的代码的第二部分是一个单独的CSS文件，名为style.CSS，显然.CSS文件是另一个故事，就像你没有在

js

文件中放置

标记一样。链接标记定义了它，以便浏览器像处理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>