Question

我遇到多个ID无法使用CSS的问题。

这是我的完整代码：

<html>
        <head>
    	    <img src="logo.png" alt="logo" />
    
            <style>
    
    
    /* Add a black background color to the top navigation */
    .topnav {
        background-color:RGB(12,30,60);
        overflow: hidden;
    }
    
    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 15px;
    	font-family: "Gill Sans MT"
    }
    
    /* Change the color of links on hover */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }
    
    /* Add a color to the active/current link */
    .topnav a.active {
        background-color: RGB(255,192,0);
        color: white;
    }
    
    
    
    
    #header
    {
        text-align: center;
        font-size: 14px;
    	font-family: "Gill Sans MT";
        margin-top: 30px;
    }
    
    #testa
    {
        text-align: center;
        font-size: 14px;
    	font-family: "Gill Sans MT";
        margin-top: 30px;
    }
    
    
    
    	
    </style>
    </head>
    
    <body>
    <div class="topnav" id="myTopnav">
        <a href="index.html">Home</a>
        <a href="classification.html">Classification</a>
        <a class="active" href="october.html">Data Visualisation</a>
        <a href="contact.html">Contact</a>
    </div>
    
    <div id="header">
            <!-- *** Section 1 *** --->
            <h3>Time series of applications to 'Research Grants (Open Call)' for this Financial Year<br> and the previous three with 'Bollinger Bands'.</h3><br>
    </div>
    
    <div id="testa">
            <!-- *** Section 1 *** --->
            <h3>Time series of applications to 'Research Grants (Open Call)' for this Financial Year<br> and the previous three with 'Bollinger Bands'.</h3><br>
    </div>
    
    
    
    </body>
    </html>

虽然'header'css有效，但'testa'没有，尽管它们完全相同（ID名称除外）。我尝试过MULTIPLE ID，它仍然会导致同样的问题。

有趣的是，如果我把'testa'css放在'header'css之前，它们都不会起作用。

有谁知道我哪里出错了？谢谢。

Answer 1

你有隐藏的角色，删除它们，它会起作用

<html>
    <head>
        <img src="logo.png" alt="logo" />

        <style>


/* Add a black background color to the top navigation */
.topnav {
    background-color:RGB(12,30,60);
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    font-family: "Gill Sans MT"
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: RGB(255,192,0);
    color: white;
}




#header
{
    text-align: center;
    font-size: 14px;
    font-family: "Gill Sans MT";
    margin-top: 30px;
}

#testa
{
    text-align: center;
    font-size: 14px;
    font-family: "Gill Sans MT";
    margin-top: 30px;
}




</style>
</head>

<body>
<div class="topnav" id="myTopnav">
    <a href="index.html">Home</a>
    <a href="classification.html">Classification</a>
    <a class="active" href="october.html">Data Visualisation</a>
    <a href="contact.html">Contact</a>
</div>

<div id="header">
        <!-- *** Section 1 *** --->
        <h3>Time series of applications to 'Research Grants (Open Call)' for this Financial Year<br> and the previous three with 'Bollinger Bands'.</h3><br>
</div>

<div id="testa">
        <!-- *** Section 1 *** --->
        <h3>Time series of applications to 'Research Grants (Open Call)' for this Financial Year<br> and the previous three with 'Bollinger Bands'.</h3><br>
</div>



</body>
</html>

Answer 2

在CodePen上尝试了你的代码，在#header声明后我发现了一个奇怪的字符（参见pen：https://codepen.io/sachaandre/pen/bYxXGx）

#header
{
  text-align: center;
  font-size: 14px;
  font-family: "Gill Sans MT";
  margin-top: 30px;
} /* <-- there is a small plain circle hidden here */
#testa
{
  text-align: center;
  font-size: 14px;
  font-family: "Gill Sans MT";
  margin-top: 30px;
}

这是一个小小的普通圈子，如果你拿走它，代码就可以了;）（我不知道为什么它在这里看不见

之间，如果你有完全相同的CSS定义，为什么你不把它放在课堂上？

Answer 3

#header和#testa的{}括号后面有一个奇怪的字符。

请尝试以下风格：

<style>
/* Add a black background color to the top navigation */
.topnav {
    background-color:RGB(12,30,60);
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 15px;
    font-family: "Gill Sans MT"
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: RGB(255,192,0);
    color: white;
}




#header
{
    text-align: center;
    font-size: 14px;
    font-family: "Gill Sans MT";
    margin-top: 30px;
}
#testa
{
    text-align: center;
    font-size: 14px;
    font-family: "Gill Sans MT";
    margin-top: 30px;
}
</style>

\ u200b

那个char打破了你的css。

希望有所帮助

Answer 4

@ScoutEU我想你在评论的时候可能已经忘记添加一个了。检查一下我做了一些改变可能对你有所帮助。

<html>
        <head>
    	    <img src="logo.png" alt="logo" />
    
            <style>
    
    
    /* Add a black background color to the top navigation */
    .topnav {
        background-color:RGB(12,30,60);
        overflow: hidden;
    }
    
    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 15px;
    	font-family: "Gill Sans MT"
    }
    
    /* Change the color of links on hover */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }
    
    /* Add a color to the active/current link */
    .topnav a.active {
        background-color: RGB(255,192,0);
        color: white;
    }
    
    
    
    
    #header
    {
        text-align: center;
        font-size: 14px;
    	font-family: "Gill Sans MT";
        margin-top: 30px;
    }
    
    #testa
    {
        text-align: center;
        font-size: 14px;
    	font-family: "Gill Sans MT";
        margin-top: 30px;
    }
    
    
    
    	
    </style>
    </head>
    
    <body>
    <div class="topnav" id="myTopnav">
        <a href="index.html">Home</a>
        <a href="classification.html">Classification</a>
        <a class="active" href="october.html">Data Visualisation</a>
        <a href="contact.html">Contact</a>
    </div>
    
    <div id="header">
            <!-- *** Section 1 *** ---->
            <h3>Time series of applications to 'Research Grants (Open Call)' for this Financial Year<br> and the previous three with 'Bollinger Bands'.</h3><br>
    </div>
    
    <div id="testa">
            <!-- *** Section 1 *** ---->
            <h3>Time series of applications to 'Research Grants (Open Call)' for this Financial Year<br> and the previous three with 'Bollinger Bands'.</h3><br>
    </div>
    
    
    
    </body>
    </html>

CSS多个ID - 并非所有ID都有效

4 个答案: