Question

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

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属性隐藏。未正确验证表单字段时，将显示标签。显示标签时，以上所有规则都能正常工作，但显示属性除外。

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

我没有丝毫的线索，为什么显示属性不能正确设置，但是如果有人可以帮助我那将是很棒的！

谢谢，

一个沮丧的开发者

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

Answer 1

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

为了确保我说的是否真实，在你的firebug中的脚本可见后，检查应用于label元素的css。

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

Answer 2

我首先想到的是jQuery验证插件是在元素上设置display属性，从而覆盖了你的css规则。

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

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

2 个答案: