CSS样式表定义的样式未转换为演示上的HTML网页（Visual Studio 2017）

Question

我在网页的表单主体底部的StyleSheet1.css文件中添加了div标签的CSS，该文件与网页位于同一文件夹中。 出于某种原因，当我演示网页时，仅显示为表单底部的新div标签添加的新CSS（用于id为“ =“ contact_popup”的div标签）。 但其余的StyleSheet1.css工作，并在我演示时显示。

在StyleSheet1.css ，我尝试通过#contact_popup和div #contact_pop定义CSS。 两种情况下，我添加的新CSS均未显示在网页上。 将链接添加到网页时，我同时尝试了href = "StyleSheet1.css" and "~/StyleSheet1.css" ，这两种情况都不适用于新CSS。 我还尝试将新的div标签放在表单末尾的下方，但这也不起作用。

这是我添加脚本的方式：

<link rel="stylesheet" type="text/css" href="StyleSheet1.css">

在这里，我将新的div标签放置在表单的底部：

<input name="submit" type="submit" value="submit" style="margin-bottom:20px;">
<div id="contact_popup">asdfasdf</div>
</form>

这是我为div标签添加的新CSS：

#contact-popup {
    color:red;
    width:100%;
    border-color: black;
    margin-top:15px;
}

任何建议将不胜感激。 谢谢

Answer 1

CSS文件中定义的ID为＃contact-popup，而HTML文件中定义的div ID为contact_popup

Answer 2

你那里有错字。 您的ID被称为“ contact_popup”，但您选择的是“＃contact-popup”。 请尝试使用“ #contact_popup”。

#contact_popup {
    color:red;
    width:100%;
    border-color: black;
    margin-top:15px;
}

编辑：我为您的情况摆弄了个小提琴 。 如您所见，如果您固定选择器，它将在这里工作。 如果仍然无法正常工作，则可能是您在附加StyleSheet1.css时出错了，或者CSS的另一条规则是覆盖了所需的行为。

Answer 3

尝试为CSS中的每个属性赋予!important 。

Answer 4

css文件不起作用的一些原因列表

1-您确定样式表已加载？ 您可以使用firefox上Firebug的“网络”选项卡，或浏览器控制台的“网络”选项卡来查看它。还可以复制css文件的url并将其粘贴到浏览器中。 如果未加载文件，则说明问题出在网址中。

2- HTML或CSS样式表中的任何错字都可能导致样式表无法加载。例如您的ID和类名

3-在标记之前检查是否发生致命错误。 致命错误可能会停止正在运行的代码并暂停页面，因此不包括样式表。

4-可能是您的CSS文件有错误吗？ 括号未闭合，缺少分号等？