Question

我被一件我想完成的简单事情震惊但却行不通。我有一个网站，我希望它支持主题，这是一组命名的CSS +图像。无论选择哪个主题，我总是包含主CSS文件，这是默认主题。最重要的是，我正在加载第二个样式表，即主题特定的样式表，如下所示：

<link rel="stylesheet" type="text/css" href="css/main.css" title=main" media="screen" />
<link rel="stylesheet" type="text/css" href="themes/<?= $style ?>/css/<?= $style ?>.css" title="<?= $style ?>" media="screen" />

我的想法是主题特定的css不应该是主css文件的完整副本。相反，它应该只包含覆盖main.css文件的CSS规则。这使得主题更小，更易于维护。

我认为我可以简单地相互加载两个外部样式表，而对于冲突的规则，它将始终使用主题特定的css，即第二个文件。

然而，它似乎不起作用。如果我在主题文件中进行了戏剧性的样式更改，那么它就没有效果了。如果我然后评论主CSS文件，主题CSS确实有效。

我是否太天真，期待这样的工作？我知道我可以使用内联样式来否决任何内容，但如果可能的话，我更喜欢这样的设置。

Answer 1

在应该工作的概念 IF 中，第二个样式中的规则与第一个样式表中的规则具有相同的specificity级别。例如：

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

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

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

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

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

在这种情况下，第一个样式表中的规则具有第二个样式表的主要部分，因为规则中的div元素为规则添加了更多的主持权。

你可以通过使用！important来增加总统数，这个规则几乎可以给予它最高的总统任期（某种程度）：

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

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

在上述情况下，第二个stylehseet中的规则取决于！important声明。

请注意，如果您没有明确覆盖规则，则会将其转移到后续的任何后续样式表中。

Answer 2

我首先使用FireBug和FireFox来查看哪些规则正在获胜。 Firebug还会显示你的辅助css文件是否正在加载。

此外，第二个css文件的规则可能没有足够的强度来击败主css文件。在单个规则上使用！important 关键字来查看这是否存在问题。我只会使用！important来进行调试。

请参阅此链接了解css specificity scoring

示例Main.css

#content a.mylink { color:red }

示例theme.css

#content .mylink { color:blue }

main.css的mylink规则将获胜，因为它更具体

Answer 3

不，它应该按照您的预期工作。代码中的拼写错误可能导致第二个样式表无法加载？

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

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

Answer 4

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

例如：

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

此处计算的颜色为#ccc，因为它是在最具体的选择器中定义的。如果要覆盖它，只需将其放在主题表中：

body #content p {
    color: #000;
}

Answer 5

我认为您的问题出在链接标记的title属性中。您不能拥有多个具有不同标题的css文件（我看到您动态命名主题标题）。他们要么都必须具有相同的标题 - 或者只有第一个样式表可以有标题。这是奇怪的错误 - 在这里解释得更好：

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

但我猜测删除title属性将彻底解决您的问题。这让我绊倒了。

Answer 6

听起来像你的css元素的价值是不一样的，你可以通过确保规则具有相同或更高的值来覆盖第二个样式表的样式。

e.g。第一张样式表

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

第二张样式表

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

案例中的第二个样式表具有更高的值，因此将被使用。遵循这些简单规则的Css评分

HTML元素 - Ones
Class - Tens
ID - 数百
内联样式 - 数千个

还使用萤火虫检查elemtens并查看哪些是过度骑行。

如何让一个外部样式表有选择地否决另一个

6 个答案: