Question

我看不出这有什么问题。我有2张HTML表和一张CSS表。

第一个HTML表格（index.html）是这样的：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>

    <h1>Olive</h1>
    <a href="page1.html">Enter</a>

</body>
</html>

第二个HTML表格（page1.html）是：

<!DOCTYPE>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <div>
        <p id="prenav">Olive</p>
    </div>
</body>

</html>

CSS外部表格：

body {
background-color: olive;
}

h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}

a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}

#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}

问题是第二个HTML表单id中的page1.html不起作用。我不知道为什么。我不知道这是语法还是什么。

正文属性在page1.html中有效，但id属性却没有。 <p>元素仅以任何样式显示。有人能告诉我这有什么问题吗？

Answer 1

不确定这是否是问题，但您的第一行应该是：

<!DOCTYPE html>

如果您没有正确声明，您的浏览器可能会在quirks mode中呈现，这可能会导致各种奇怪的行为。

Answer 2

调试的几个提示...当你修改了你的css样式（使用chrome和windows：ctrl+shift+r时）尝试使缓存刷新几次然后如果它不起作用尝试使用下面的代码并再次缓存刷新：

#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}

!important规则是一种制作CSS级联的方法，但也包含您认为最重要的规则。

代码：

<!DOCTYPE html>
<html>

<head>
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        body {
background-color: olive;
}

h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}

a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}

#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}

</style>
</head>

<body>
    <div>
        <p id="prenav">Olive</p>
    </div>
</body>

</html>

编辑：

解决方法是将.css样式表放到正确的文件夹中。欢呼声。

Answer 3

语法正确，但脚本可能是任何更改此id样式的命令。

CSS ID不起作用

3 个答案: