Html 外部 CSS ID 选择器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23586721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
External CSS ID selector not working
提问by lantern77
Hey guys I have an external CSS and HTML file, I am currently trying to link the two, more specifically I am trying to link the ids that are titleImagetitleLinkand webpageTitle. Unfortunately the CSS for does not seem to register. I have tried switching the position of the type and the id such as instead of this, #titleImage imgthat did not work. Is it an issue with me having multiple external CSS references? Also this is not all the code there is more to each but the ones listed below are the parts that I focus on the most. I have also tried removing the a, img, h1
嗨我有一个外部CSS和HTML文件，目前我正在试图将两者结合起来，更具体的我想是的ID链接 titleImagetitleLink和webpageTitle。不幸的是，CSS for 似乎没有注册。我曾尝试切换类型和 id 的位置，而不是这样，#titleImage img但没有用。我有多个外部 CSS 引用是否有问题？此外，这还不是所有代码，每个代码都有更多内容，但下面列出的是我最关注的部分。我也试过删除a, img,h1
So could someone explain why titleImagetitleLinkand webpageTitlestyles are not registering on my localhost?
那么有人可以解释为什么titleImagetitleLink和webpageTitle样式没有在我的本地主机上注册吗？
UPCDATE: I have made change to reflect everyone's comments below and the site is still not updating with the new css as listed in the code below in style.css
更新：我进行了更改以反映下面每个人的评论，但该站点仍未使用 style.css 中下面代码中列出的新 css 进行更新
style.css
样式文件
div#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
HTML file
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>
回答by theHacker
Remove the space in the selector.
删除选择器中的空格。
img #titleImagemeans: any element with id titleImageand an <img>element as ancestor
img#titleImagemeans: an <img>element with id titleImage. That's what you want.
img #titleImage意味着：任何具有 idtitleImage的<img>元素和一个元素作为祖先
img#titleImage意味着：<img>具有 id的元素titleImage。那就是你想要的。
回答by robertlyall
The titleImageID is for the <div>surrounding the image, not the image itself. At the moment, you are trying to find an element with a #titleImageselector inside an image tag.
该titleImageID是<div>包围图像，而不是图像本身。目前，您正在尝试#titleImage在图像标签内查找带有选择器的元素。
For the titleLink, the ID is the element, so you can do this instead:
对于titleLink，ID 是元素，因此您可以改为执行以下操作：
a#titleLink { ... }
However, you'd typically only have oneID on a page, so you could just target the title link by doing this:
但是，您通常在一个页面上只有一个ID，因此您可以通过执行以下操作来定位标题链接：
#titleLink { ... }
The webpage title should be working as intended. However, I'd still recommend just using the ID. An element with relative positioning doesn't really appear different unless you've given it some style declarations:
网页标题应该按预期工作。但是，我仍然建议只使用 ID。具有相对定位的元素看起来并没有什么不同，除非你给它一些样式声明：
#webpageTitle {
position: relative;
top: 10px;
left: 10px;
}
Hope that helps.
希望有帮助。
回答by thebajo
Remove all your capital letters, it doesn't work with capitals.
删除所有大写字母，它不适用于大写字母。
So instead of titleLink, and titleImage, write titlelink and titleimage.
因此，而不是所有权的大号油墨和标题我的法师，写标题升墨水和标题我的法师。
That should fix it, it fixed it for me.
那应该修复它，它为我修复了它。
回答by Marcin Nabia?ek
There shouldn't be any spaces in front of id so the code should be:
id 前面不应该有任何空格，所以代码应该是：
img#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
回答by jCuga
get rid of the space between the tag type and the id. So and make the rules:
去掉标签类型和 id 之间的空格。所以并制定规则：
img#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
What you have is saying "the element with an ID titleImage that id a child of an image tag, etc.
您所拥有的是“具有 ID titleImage 的元素，该元素标识图像标签的子级，等等。
Since you are using IDs, its not necessary to even include the tag type (a, img) in front of the ids.
由于您使用的是 ID，因此甚至不必在 ID 前包含标签类型 (a, img)。
