Question

嘿伙计我有一个外部CSS和HTML文件，我目前正在尝试将这两者联系起来，更具体地说，我正在尝试关联titleImage titleLink和webpageTitle的ID 。不幸的是，CSS似乎没有注册。我试过切换类型和id的位置，而不是这个，#titleImage img不起作用。我有多个外部CSS引用是一个问题吗？此外，并非所有代码都有，但下面列出的代码是我最关注的部分。我还尝试删除a，img，h1

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

UPCDATE：我做了更改以反映下面每个人的评论，并且该网站仍未使用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>

Answer 1

titleImage ID适用于图片周围的<div>，而不是图片本身。目前，您正在尝试在图片代码中找到一个带有#titleImage选择器的元素。

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

a#titleLink { ... }

但是，您通常只在网页上拥有一个 ID，因此您可以通过以下方式定位标题链接：

#titleLink { ... }

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

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

希望有所帮助。

Answer 2

摆脱标签类型和id之间的空间。所以制定规则：

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

a#titleLink { text-decoration: none}

h1#webpageTitle {
    position:relative;
}

你所拥有的是＆＃34;具有ID titleImage的元素，它标识了图像标记的子元素等。

由于您使用的是ID，因此无需在ID前面包含标记类型（a，img）。

Answer 3

删除选择器中的空格。

img #titleImage表示：任何标识为titleImage且<img>元素作为祖先的元素 img#titleImage表示：<img>元素，标识为titleImage。这就是你想要的。

Answer 4

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

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

h1#webpageTitle {
    position:relative;
   }

Answer 5

删除所有大写字母，这对大写字母无效。

因此，代替标题 L 墨水和标题我法师，写标题 l 墨水和标题 i 法师。

那应该修复它，它为我修复了它。

外部CSS ID选择器不起作用

5 个答案: