如何让一个外部Stylsheet选择性地否决另一个Stylsheet

我认为你的问题出在链接标签的title属性上。不能有多个标题不同的css文件(我看到您正在动态地为主题命名标题)。它们要么都必须有相同的标题,要么只有第一个样式表可以有标题。这是一个奇怪的错误-这里解释得更好:

http://blogs.telerik.com/dimodimov/posts/08-05-15/title_attributes_in_css_link_tags_prevent_styles_from_being_applied.aspx

但我猜删除title属性将完全解决您的问题。这以前把我绊倒了。

在概念上应该有效 如果 第二种样式中的规则具有相同级别的 specificity 作为第一个样式表中的规则。例如:

/*stylesheet 1 */
#somediv {
    width: 300px;
}

/*stylesheet 2 */
#somediv {
    width: 500px;
}

在这种情况下,第二个样式表中的规则应该主持第一个样式表中的规则,因为它们都具有特定性。

/*stylesheet 1 */
div#somediv { 
    width: 300px;
}

/*stylesheet 2 */
#somediv {
    width: 500px;
}

在这种情况下,第一个样式表中的规则将主持第二个样式表,因为规则中的div元素将更多主持添加到规则中。

你可以通过使用来增加主持!对于一个事实上给予最高领导权的规则来说,重要的是(某种程度上):

/*stylesheet 1 */
div#somediv { 
    width: 300px;
}

/*stylesheet 2 */
#somediv {
    width: 500px !important;
}

在上述情况下,第二个样式表中的规则作为主席感谢!重要声明。

请记住,如果没有显式覆盖规则,则它会传递到随后的任何样式表。

不,它应该像你期望的那样工作。代码中的错误可能导致第二个样式表无法加载?

<link rel="stylesheet" type="text/css" href="css/main.css" title=main" media="screen" />
                                                                 ^ forgot the quote

如果修复后仍然无法正确渲染,请尝试使用以下工具 Firebug 查看要覆盖的样式并查看正在进行的操作。

您需要确保在主题样式表中使用相同的选择器。无论工作表的顺序如何,css都会优先选择更“特定”的选择器。

例如:

#content p {
    color: #000;
}
body #content p {
    color: #ccc;
p {
    color: #999;
}

这里计算的颜色将是ccc,因为它是在最特定的选择器中定义的。如果要覆盖它,只需将其放在主题页中:

body #content p {
    color: #000;
}

我将首先使用firebug和firefox来看看哪些规则是成功的。firebug还会显示您的辅助css文件是否正在加载。

另外,第二个css文件的规则可能没有足够的强度来击败主css文件。使用 !重要的 关键字来查看这是否是一个问题。我只会用!对调试很重要。

查看此链接 css specificity scoring

示例main.css

#content a.mylink { color:red }

示例主题.css

#content .mylink { color:blue }

main.css的mylink规则将胜出,因为它更加具体

在我看来,css元素的值是不同的,您可以通过确保规则具有相同或更高的值来使用第二个样式表。

例如 第一个样式表

div.content h1 {my rules} //score 12

第二个样式表

div.container div.content h1 {new rules} //score 23

本例中的第二个样式表具有更高的值,因此将被使用。 css评分遵循以下简单规则

• HTML元素-一个
• 十班
• ID-数百
• 内联样式-千

同时使用firebug检查elemtens并查看哪个被过度覆盖。