为什么css在JSFIDLE中有效，但在我的应用程序/站点中无效_Css

为什么css在JSFIDLE中有效，但在我的应用程序/站点中无效

css

为什么css在JSFIDLE中有效，但在我的应用程序/站点中无效,css,Css,第一：这是一个商业软件，我不能分享它的链接，这样你就可以看到发生了什么。啊。让一切变得更困难我已经编写了一个用于打印的css块。我的步骤如下：在应用程序中加载页面从开发人员工具复制HTML 将html粘贴到JSFIDLE中（因此，所有类/结构都正确地存在）在JSFIDLE中编写css——看起来就像我希望它看起来一样将css从JSFIDLE复制到我的inquiryPrint.css文件（加载打印的文件）中有些css有效，有些则无效我考虑的事情：优先权问题；inquiryPrint

第一：这是一个商业软件，我不能分享它的链接，这样你就可以看到发生了什么。啊。让一切变得更困难

我已经编写了一个用于打印的css块。我的步骤如下：

在应用程序中加载页面

从开发人员工具复制HTML

将html粘贴到JSFIDLE中（因此，所有类/结构都正确地存在）

在JSFIDLE中编写css——看起来就像我希望它看起来一样

将css从JSFIDLE复制到我的inquiryPrint.css文件（加载打印的文件）中

有些css有效，有些则无效

我考虑的事情：

优先权问题；inquiryPrint.css是最后加载的文件，它应该在最后应用其覆盖

打印css文件不仅仅在媒体类型的打印上被调用……事实上，它是：

printWindow.document.write('&lt;link rel="stylesheet" href="../css/InquiryPrint.css" type="text/css" /&gt;');

我认为这是最重要的：该网站正在从inquiryPrint.CSS文件中获取一些有效的CSS选择器，但不是全部；e、它看到.row并应用它的CSS，但没有看到.admItem并应用它的CSS。这是在JSFIDLE中正确工作的东西——也就是说，admItem在JSFIDLE中工作，但在我的应用程序中不工作

我尝试过的事情：

关闭/重新打开
铬硬刷新（cmd-shift-R）
它是共享代码；我将我的更改推送到我们的开发环境中，并在同事的页面，并验证它在他的计算机上不起作用要么

更新

这不是一个覆盖问题。我们甚至减少/删除了所有其他css文件，问题依然存在

这不是复杂选择器的特殊性问题。几乎每个选择器都是单层/层（参见示例）

这不是浏览器问题。它在Chrome或Firefox中不起作用（当然，这两个页面呈现方式略有不同）

我最初是从JSFIDLE剪切/粘贴的，所以我认为这可能是一个剪切/粘贴问题。不是，我们是手工编写的，没有修改

这不是拼写问题，我们已经用“.geogeitem”替换“.admItem”，并将其剪切/粘贴到正确的位置，但没有修复它

同样，它看到的是文件中的其他内容，而不是此内容

我们将整个css文件剥离为空，只留下一个类，它仍然没有将其提取

我将嵌入的CSS放在HTML文件的头部，对于这一类，它也没有拾取，但是它拾取了我们放在那里的其他值（例如，正文文本转换：大写）

我们可以点击开发者工具，查看正确的css文件，以及正确的当前更改，这样就不会出现指针/语法问题——它可以看到文件在那里，并从中选择一些值，而不是其他值一些屏幕截图：

Chrome开发工具

嵌入式CSS

这是css文件的全部内容。格奥尔盖滕先生{ 文本转换：小写！重要； }

该网站正在从inquiryPrint.CSS文件中提取一些有效的CSS选择器，但不是全部；e、它看到.row并应用它的CSS，但没有看到.admItem并应用它的CSS。这是在JSFIDLE中正确工作的东西——也就是说，admItem在JSFIDLE中工作，但在我的应用程序中不工作

这听起来好像其他样式表（不专门针对任何介质）通过使用更具体的选择器来覆盖打印样式表中的规则

这听起来好像其他样式表（不专门针对任何媒体）通过使用更具体的选择器来覆盖打印样式表中的规则。

使用类似的工具，您将能够看到应用了哪些CSS规则以及它们覆盖其他样式的原因

正如CBroe所说，带有更具体选择器的CSS样式很可能会覆盖您的样式表。很明显，您的样式表正在被读取，所以这不是问题所在。

使用类似的工具，您将能够看到应用了哪些CSS规则，以及为什么它们会覆盖其他样式

正如CBroe所说，带有更具体选择器的CSS样式很可能会覆盖您的样式表。很明显，您的样式表正在被读取，所以这不是问题。

我们昨晚发现了问题。我们在javascript中动态生成页面的方式是，页面顶部没有doctype声明。一旦我们加上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "htt p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一切都很顺利。唉

我们昨晚发现了这个问题。我们在javascript中动态生成页面的方式是，页面顶部没有doctype声明。一旦我们加上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "htt p://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一切都很顺利。唉

您的结果是否依赖于浏览器？e、 g.它在Chrome中工作，但在IE中不工作吗？另外请注意（在IE中），如果您在本地环境（或内部网中的服务器）之外进行渲染，IE的兼容性视图设置可能会迫使您进入兼容模式，而JSFIDLE不会。顺序不是确定将应用什么CSS规则、特异性和

的唯一方法！重要信息

标志也发挥了作用。如前所述，FireBug、Chrome开发者工具或IE的

F12

工具将是查看应用于元素的结果CSS的最佳方式。您可以粘贴一点CSS。。。如果愿意，您可以更改值，并匿名化任何CSS类名和ID。。。也许有一些小细节，我们可以捕捉到，这是问题的原因。您的结果是否依赖于浏览器？e、 g.它在Chrome中工作，但在IE中不工作吗？还请注意（在IE中），如果要在本地环境（或内部环境中的服务器）之外进行渲染