css - ASP.NET 错误是添加内联 CSS 和覆盖样式

Question

我有一个单页 MVC 网络应用程序。当发生服务器错误时，我们在同一页面的对话框中显示异常。 ASP.NET YSOD 添加了内联 CSS。由于添加到 BODY 元素的样式，这会更改整个应用程序的字体。

有没有办法将添加的 CSS 划分到那个对话框中？或者在对话框关闭时删除了添加的 CSS 样式？或者编辑样式和错误页面，使样式不是全局的？

这是添加的内联 CSS:

<style>
    body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;} 
    p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
    b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
    H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
    H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
    pre {font-family:"Lucida Console";font-size: .9em}
    .marker {font-weight: bold; color: black;text-decoration: none;}
    .version {color: gray;}
    .error {margin-bottom: 10px;}
    .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }
</style>

Answer 1

有几种方法可以克服这个问题。首先，您始终可以在样式标签的末尾设置 !important。

<style type="text/css">
  body {font-family:"Verdana" !important;font-weight:normal !important;font-size: .7em !important;color:black !important;} 
</style>

虽然我觉得这很麻烦而且很烦人。在我看来，更好的方法是将 css 添加到实际元素(即 <div style="font-size:15px;">Testing</div> )，将弹出窗口元素包装在带有 ID 的包装器中，然后根据包装器设置所有 css，它是 children 。当您在代码上设置更高的特异性时，它将覆盖较低的级别。

---

考虑三个代码片段:

A: h1
B: #content h1
C: <div id="content">
<h1 style="color: #fff">Headline</h1>
</div>

A的特异性为0,0,0,1(一个元素)，B的特异性为0,1,0,1(一个ID引用点和一个元素)，C的特异性值是 1,0,0,0，因为它是内联样式。自从0001 = 1 < 0101 = 101 < 1000,第三条规则具有更高的特异性，因此将被应用。如果第三条规则不存在，则会应用第二条规则。

---

引用 http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

总的来说，这将取决于您如何处理它，但如果您能掌握特异性，那么使用它实际上会好得多。