html - CSS 多个 ID - 并非所有 ID 都有效-6ren

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

转载作者：太空宇宙更新时间：2023-11-03 22:33:44

24

4

我遇到了多个 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 名称除外)。我已经尝试了多个 ID，但它仍然导致同样的问题。

有趣的是，如果我将“testa”css 放在“header”css 之前，它们都不起作用。

有谁知道我错在哪里？谢谢。

最佳答案

#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

那个字符破坏了你的 css。

希望对你有帮助

关于html - CSS 多个 ID - 并非所有 ID 都有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47531839/

24

4

0

文章推荐： c# - 如何从控制台中的字符串中删除一个字符

文章推荐： node.js - 在多个订阅的上下文中处理客户端上的地理查询

文章推荐： c++ - cv::add 在 openCV 中不起作用

文章推荐： node.js - 支持 i18n 的环回

javascript - .on ('click' ) 有效， .css ('display' ,'block' ) 有效，但不在一起
我遇到了一个奇怪的问题。我有这个: $(document).ready(function () {
Java URL java.net.ConnectException 错误(Ping 有效，其他 URL 有效)
我正在编写一个程序，它从列表中读取一些 ID，从中找出不同的 URL，然后将图像保存到我的 C: 驱动器中。如果我在浏览器中导航到图像 URL，它们就会起作用。此外，如果我尝试从不同的服务器获取图像
java - 奇怪的 httpPost 行为(可能与 json、auth、代理相关)GET 有效，POST 有效，但没有代理就不行(部分解决)
我编写了一个 REST WCF RIA Silverlight 4.0 兼容服务，我可以从 javascript + jQuery.1.4.2.js + JSON2.js(当然，还可以从 .NET 4
有效 32 位有符号整数的正则表达式
我很确定这个网站实际上还没有得到回答。一劳永逸地，与 32 位有符号整数范围内的数字字符串匹配的最小正则表达式是什么，范围是 -2147483648至 2147483647 . 我必须使用正则表达式进
r - (有效)合并随机键控子集
我有两个data.table；我想从那些与键匹配的元素中随机分配一个元素。我现在这样做的方式相当慢。让我们具体点；这是一些示例数据: dt1<-data.table(id=sample(letter
celery 有效，但与花无效
我已经安装了 celery 、RabitMQ 和花。我可以浏览到花港。我有以下简单的工作人员，我可以将其附加到 celery 并从 python 程序调用: # -*- coding: utf-8 -
ScalaCheck 有效/无效的测试边界
我正在使用 ScalaCheck 在 ScalaTest 中进行一些基于属性的测试。假设我想测试一个函数，f(x: Double): Double仅针对 x >= 0.0 定义的, 并返回 NaN对于
delphi - 有效 IMAGE_DOS_SIGNATURE
我想检查文件是否具有有效的 IMAGE_DOS_SIGNATURE (MZ) function isMZ(FileName : String) : boolean; var Signature: W
java - 为什么通过引用比较整数 (==) 有效？
在 Herbert Schildt 的“Java:完整引用，第 9 版”中，有一个让我有点困惑的例子。它的关键点我无法理解可以概括为以下代码: class Test { public stat
php - 为什么 for(;;) 有效？
我在工作中查看了一些代码，发现了一些我以前没有遇到过的东西: for (; ;) { // Some code here break; } 我们一直调用包含这个的函数，我最近才进去看看它是
java - 为什么通过引用比较整数 (==) 有效？
在 Herbert Schildt 的“Java:完整引用，第 9 版”中，有一个让我有点困惑的例子。它的关键点我无法理解可以概括为以下代码: class Test { public stat
python - 在矩阵的一维中进行洗牌(有效)？
我试图编写一个函数，获取 2D 点矩阵和概率 p 并以概率 p 更改或交换每个点坐标所以我问了一个question我试图使用二进制序列作为特定矩阵 swap_matrix=[[0,1],[1,0]]
c# - 为什么这个无效的文件路径//有效？
这个问题在这里已经有了答案: Using / or \\ for folder paths in C# (5 个答案) 关闭 7 年前。我在某个Class1中有这个功能: public v
postgresql - 删除重复记录(有效)
PostgreSQL 10.4 我有一张 table : Column | Type ------------------------- id | integer| title
sql - 有效/简单地计算同一数据集的不同范围
我正在 Postgresql 中编写一个函数，它将返回一些针对特定时区(输入)计算的指标。示例结果: 主要问题是这只是一个指标。我需要从其他表中获取其他 9 个指标。对于实现此目标的更简洁的方法有
python - 模拟从袋子中取出弹珠而不更换(有效)
我需要在 python 中模拟超几何分布(用于不替换采样元素的花哨词)。设置:有一个装满人口许多弹珠的袋子。弹珠有两种类型，红色和绿色(在以下实现中，弹珠表示为 True 和 False)。从袋子中
css - 有效/无效类未添加到预填充文本字段
我正在使用 MaterializeCSS 框架并动态填充文本输入。我遇到的一个问题是，在我关注该字段之前，valid 和 invalid css 类不会添加到我的字段中。即使我调用 M.update
CSS - 重叠 - 有效
是否有重叠 2 个 div 的有效方法。我有以下内容，但无法让它们重叠。 #top-border{width:100%; height:60px; background:url(image.jpg)
c++ - 为什么需要重新定义固定大小的静态数组/有效？
我希望你们中的一位能向我解释为什么编译器要求我在编译单元中重新定义一个静态固定长度数组，尽管我已经在头文件中这样做了。这是一个例子: 我的类.h: #ifndef MYCLASS_H #define
Python 分布式计算(有效)
我正在使用旧线程发布试图解决相同问题的新代码。什么是安全 pickle ？ this? socks .py from socket import socket from socket import A

首页

博学

6Ren·AI

商城

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