为什么使用类选择器的内部样式表会被外部样式表覆盖？答案

【问题标题】：Why is an internal stylesheet using class selectors overwritten by an external stylesheet?为什么使用类选择器的内部样式表会被外部样式表覆盖？
【发布时间】：2011-11-21 11:59:40
【问题描述】：

我有一个带有标签规则的外部样式表，使整个项目中的表单看起来更好。它们如下...

label { display:block; font-weight:bold; margin:7px 0; }
/* For testing purposes, I also added the following.
label { color:gold; }

我在 iframe 上使用了一个内部样式表（尽管我已经在标准 ColdFusion 页面上进行了测试，它会导致相同的问题），它具有以下针对具有错误类别的标签的规则。

label.error { display:inline; 
              color:red; 
              float:none; 
              padding-left:.5em; 
              vertical-align:top; }

这些标签目前被 jQuery 的验证插件（位于 http://bassistance.de/jquery-plugins/jquery-plugin-validation/）隐藏，带有 display:none 属性。当表单域未正确验证时，将显示标签。显示标签时，上述所有规则都可以正常工作，但 display 属性除外。

正如您在顶帖中看到的那样，问题不在于 label.error 没有覆盖已创建的规则，因为我首先怀疑可能是问题所在。

我一点也不知道为什么不能正确设置显示属性，但是如果有人可以帮助我，那就太棒了！

谢谢，

一个沮丧的开发者

编辑：我的老板解决了这个问题，他告诉我我的 CSS 需要更细化。我从父样式表中取出 EXACT 标签选择器，并将类选择器添加到其中，然后根据需要更改和添加规则。如果您有兴趣了解更多信息，请查看有关 CSS 继承的文档。

【问题讨论】：

这看起来不是 CSS 问题。您使用 display:none 显式覆盖。如果你不做 display:none 开始，它们会正确显示吗？如果是这样，那是您的 javascript 的问题，而不是 css 的问题。
我没有使用 CSS 属性 display:none。 display:none 是从 jquery 验证插件自动放置的，我相信每个带有“错误”类的标签。我实际上并没有阅读插件源代码，所以我对此并不积极，但我没有在任何地方明确使用 display:none。
"这些标签当前被 jQuery 的验证插件通过 display:none 属性隐藏"

标签： jquery css class iframe

【解决方案1】：

我的第一个想法是 jQuery 验证插件在元素上设置 display 属性，从而覆盖你的 css 规则。

如果您将!important 附加到css 文件中显示规则的末尾，您应该能够解决这个问题。这是一个非常讨厌的解决方案，IMO，你可能应该看看一种不同的方式来处理 jQuery.validate，而不是反对它，但这取决于你 :)

【讨论】：

！重要的是用户样式表的一种方法，因此残疾/视障用户可以覆盖他们无法阅读的样式。在任何因对 CSS 继承缺乏了解或根本不想找到问题原因而导致的任何场合使用此属性都是非常糟糕的做法。

【解决方案2】：

我认为这可能与重新应用 display:block 以使元素再次出现的 jQuery 显示方法（淡入淡出、显示等）有关。因为 jQuery 有自己的方式让事物可见。您可能需要做的是不使用 .show()，而是使用 .css({display : 'inline'}); 使元素再次可见。

为了确保我所说的是否正确，请在您的萤火虫中的脚本可见后检查应用于标签元素的 css。

如果您设置 jsfiddle 或发送一些链接或代码示例，社区可以更好地确定问题的原因

【讨论】：