外部 CSS ID 选择器不起作用答案

【问题标题】：External CSS ID selector not working外部 CSS ID 选择器不起作用
【发布时间】：2014-06-28 11:58:05
【问题描述】：

大家好，我有一个外部 CSS 和 HTML 文件，我目前正在尝试链接这两者，更具体地说，我正在尝试链接 titleImage titleLink 和 webpageTitle 的 ID。不幸的是，CSS for 似乎没有注册。我尝试过切换类型和 id 的位置，例如 #titleImage img 那样不起作用。我有多个外部 CSS 引用是否有问题？此外，这并不是每个代码都有更多的代码，但下面列出的代码是我最关注的部分。我也试过删除a、img、h1

那么有人可以解释为什么 titleImage titleLink 和 webpageTitle 样式没有在我的本地主机上注册吗？

UPCDATE：我已做出更改以反映下面每个人的 cmets，但该站点仍未使用 style.css 中以下代码中列出的新 css 进行更新

style.css

div#titleImage {
    position:absolute;
    top:0px;
    right:0em;
    }
a#titleLink { text-decoration: none}

h1#webpageTitle {
    position:relative;
   }

HTML 文件

 <head>
    <link href='http://fonts.googleapis.com/css?family=Alef:400,700|Roboto+Slab'  rel='stylesheet' type='text/css'>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->

    <link href="/css/sticky-footer-navbar.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet" type="text/css">
    <link href="/css/lightbox.css" rel="stylesheet">
  </head>

<body>
    <section class="container">
        <header class="row" id="header">
        <!-- Begin grid -->
            <div class="col-sm-9"><!--Top of the page-->
                <a href="/" id="titleLink" style="color:#000000"><h1 id="webpageTitle">McMaster SEClub</h1></a>
            <div id="titleImage"><img src="/img/logo.gif" width=150 height=110></div>
        </div>

【问题讨论】：

标签： html css hyperlink styles external

【解决方案1】：

删除所有大写字母，它不适用于大写。

所以不要写 titleLink 和 titleImage，而是写 titlelink 和 titlei法师。

这应该解决它，它为我解决了它。

【讨论】：

【解决方案2】：

titleImage ID 用于围绕图像的<div>，而不是图像本身。目前，您正试图在图像标签中查找带有#titleImage 选择器的元素。

对于titleLink，ID 是元素，因此您可以这样做：

a#titleLink { ... }

但是，您通常在页面上只有一个 ID，因此您可以通过这样做来定位标题链接：

#titleLink { ... }

网页标题应按预期工作。但是，我仍然建议只使用 ID。除非你给它一些样式声明，否则具有相对定位的元素看起来并没有什么不同：

#webpageTitle {
    position: relative;
    top: 10px;
    left: 10px;
}

希望对您有所帮助。

【讨论】：

感谢您的帮助，我尝试编辑 div 并删除了 a 和 h1，但仍然无济于事。我还尝试删除所有内容，只留下它仍然不想更改的标识符

【解决方案3】：

id 前面不应该有任何空格，所以代码应该是：

img#titleImage {
    position:absolute;
    top:0px;
    right:0em;
    }
a#titleLink { text-decoration: none}

h1#webpageTitle {
    position:relative;
   }

【讨论】：

【解决方案4】：

删除选择器中的空格。

img #titleImage 表示：任何以 id titleImage 和 <img> 元素为祖先的元素 img#titleImage 表示：一个<img> 元素，id 为titleImage。这就是你想要的。

【讨论】：

我试过删除空间没有任何反应仍然是同样的问题

【解决方案5】：

去掉标签类型和id之间的空格。所以并制定规则：

img#titleImage {
    position:absolute;
    top:0px;
    right:0em;
}

a#titleLink { text-decoration: none}

h1#webpageTitle {
    position:relative;
}

你所说的是“ID为titleImage的元素，它是一个图像标签的子元素，等等。

由于您使用的是 ID，因此甚至不需要在 id 前面包含标签类型（a、img）。

【讨论】：

您是否尝试过清除浏览器的缓存并进行硬刷新以确保您看到的不仅仅是旧的缓存样式？
我已经更改了我知道有效的代码，并且它发生了变化，奇怪的是这部分网站似乎没有改变