为啥我的页面元素不尊重我的本地 Site.css 文件？
Posted
技术标签:
【中文标题】为啥我的页面元素不尊重我的本地 Site.css 文件？【英文标题】：Why are my page elements not respecting my local Site.css file?为什么我的页面元素不尊重我的本地 Site.css 文件？ 【发布时间】：2021-01-20 20:27:59 【问题描述】：我有一个老小提琴 here 为 h1 元素设置各种属性，并且有一个 smallcaps 类：
h1
font-family: "Lucida Sans", "Courier";
text-shadow: -4px 4px 3px #999999;
font-size: 3.5em;
.smallcaps
font-variant: small-caps;
在那里它工作正常。我正在尝试在这样的 aspx 页面中做同样的事情：
<head runat="server">
<title>Flix 4 Fams</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="dumboJr" style="text-align: center !important;">
<h1>Flix 4 Fams (Flicks for Families)</h1>
<h5>Select the Criteria you want to search by and then tap or click the "Find" button</h5>
</div>
. . .
...在 Site.css 文件的末尾加上这个：
#dumboJr h1
border: 3px solid blue;
text-align: center !important;
font-family: "Lucida Sans", "Courier" !important;
text-shadow: -4px 4px 3px #999999 !important;
font-variant: small-caps !important;
font-size: 3.5em;
.smallcaps
font-variant: small-caps !important;
...但它没有效果。因此，即使使用“！important”指令，它也不会被确认。
并不是说 Site.css 是“不可见的”；至少在 Site.css 中应用了一件事，即：
input[type=number]
width: 60px;
margin-left: 4px;
margin-right: 4px;
...所以 Site.css 并没有被完全忽略...
我尝试了更直接的方法来让 CSS 在此之前应用，例如这个（起初没有“！important”指令）：
h1
border: 3px solid blue;
text-align: center !important;
font-family: "Lucida Sans", "Courier" !important;
text-shadow: -4px 4px 3px #999999 !important;
font-variant: small-caps !important;
font-variant: small-caps !important;
font-size: 3.5em;
...但这也无济于事。
我至少能够通过添加这个内联使文本居中：
style="text-align: center !important;"
...但这有点混乱和笨拙。我宁愿找出 CSS 不工作的原因以及如何让它工作。
事实上，即使我尝试通过内联所有样式属性来“暴力破解”：
<h1 Style="border: 3px solid blue;
text-align: center !important;
font-family: "Lucida Sans", "Courier" !important;
text-shadow: -4px 4px 3px #999999 !important;
font-variant: small-caps !important;
font-size: 3.5em;">Flix 4 Fams (Flicks for Families)
</h1>
...它所做的唯一更改是在 h1 元素周围放置一个蓝色边框 - 没有应用其他样式。
是什么破坏了我的 CSS 被应用？
更新
首先，我对 Site.css 的部分影响是错误的。我认为是 Site.CSS 文件的影响是其他原因造成的。
那么，我按照建议看“ViewSource”
回顾一下，我在我的页面中包含了 Site.css：
<head runat="server">
<title>Flix 4 Fams</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link href="Site.css" rel="stylesheet" type="text/css" />
</head>
...它确实出现在“查看源代码”中：
<head><title>
Flix 4 Fams
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<link href="Site.css" rel="stylesheet" type="text/css" />
</head>
但是我在 Site.css 中添加的指令无效。即使我以蛮力方法添加到 h1 元素中的内联样式，如下所示，也没有效果：
<body>
. . .
<div id="dumboJr" style="text-align: center !important;">
<h1 Style="border: 3px solid blue;
text-align: center !important;
font-family: "Lucida Sans", "Courier" !important;
text-shadow: -4px 4px 3px #999999 !important;
font-variant: small-caps !important;
font-size: 3.5em;">Flix 4 Fams (Flicks for Families)
</h1>
. . .
更新 2
这并没有回答我的问题，但它解决了我的问题：
我通过向 h1 添加一个 id 和一个 runat:server 来让它工作：
<h1 runat="server" id="fakeJumbotron">
...然后根据 Robert C. Barth here 的评论将其添加到代码隐藏中：
protected void Page_Load(object sender, EventArgs e)
fakeJumbotron.Attributes.Add("style", "font-family: \"Lucida Sans\", \"Courier\";");
fakeJumbotron.Attributes.Add("style", "text-shadow: -4px 4px 3px #999999");
. . .
【问题讨论】：
你是说 site.css 被调用了对吗？仍然去查看页面源并检查它是否再次被调用。 请看我的更新 @B.ClayShannon 不确定出了什么问题。你能分享MVP吗？它对我有用：github.com/dipen08it419/AspNetCssTest 【参考方案1】：尝试更具体，例如 div #dumboJr h1 而不是 #dumboJr h1，如果这不起作用，请尝试删除引导链接并查看样式表是否应用了所有 css 属性
【讨论】：
我会尝试第一个建议，但如果我删除引导程序，我的页面将从看起来像猫药变成比一袋烟头丑 9 倍。 在 CSS 中添加“div”没有区别以上是关于为啥我的页面元素不尊重我的本地 Site.css 文件？的主要内容，如果未能解决你的问题，请参考以下文章