如何让一个外部样式表有选择地推翻另一个

我被一个简单的事情所震撼，我想完成但不起作用。我有一个网站，我希望它支持主题，这是一组命名的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确实有效果。

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

来源

2010-03-26 Ferdy

我认为你的问题是在链接标签的标题属性。你不能有多个不同标题的CSS文件（我看你是动态命名主题的标题）。他们都必须拥有相同的标题 - 或者只有第一个样式表才能有标题。这是和奇虫 - 更好的解释这里：

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

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

来源

2010-03-26 22:17:19

呜呼！就是这样。男人，我疯了。谢谢！ – Ferdy 2010-03-26 22:42:01

在应该工作的概念如果第二个样式中的规则与第一个样式表中的规则具有相同级别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; 
}

在第二stylehseet规则需要遵由于上述情况！重要的声明。

请记住，如果您没有明确覆盖规则，它会继承后续的任何后续样式表。

来源

2010-03-26 18:51:02

谢谢约翰。是的，他们有。作为一个simpel测试，我将主CSS CSS规则的背景设置为白色，并将主题CSS背景的HTML规则设置为黑色。它只显示白色:( – Ferdy 2010-03-26 18:52:38

你的第一个例子是我想要的，那是不起作用的，不适合使用！重要的 – Ferdy 2010-03-26 19:04:30

我会首先使用FireBug与FireFox来查看哪些规则获胜。如果你的二级CSS文件甚至被加载，Firebug也会显示你。

此外，第二个css文件的规则可能没有足够的强度来击败主要的css文件。在个别规则上使用！重要的关键字来查看是否有问题。我只会使用！对于调试很重要。

查看关于css specificity scoring

例的main.css

#content a.mylink { color:red }

示例主题此链接。CSS

#content .mylink { color:blue }

的main.css的对myLink的规则就会赢，因为其更具体的

来源

2010-03-26 18:52:30

相信我，主题CSS中的规则在结构上完全一样，唯一的区别就是它们的价值。我尝试在html元素上使用Firebug（主要是白色，主题是黑色），Firebug显示它正在从main.css中获取html规则。 – Ferdy 2010-03-26 19:01:25

萤火虫是否显示theme.css规则被推翻？它是否表明规则划掉了？ – 2010-03-26 19:04:59

我会看看萤火虫上的Net标签，以确保没有任何可疑的东西。我发现像xampp这样的开发服务器出现了奇怪的文件服务问题。 – 2010-03-26 19:06:51

不，你期望它的工作，应该工作。你的代码中的拼写错误可能导致你的第二个样式表不能加载？

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

如果固定，它仍然不能正确渲染后，尝试使用像Firebug一个工具来查看您试图重写，看看到底是怎么回事的样式。

来源

2010-03-26 18:54:27

谢谢你指出。不幸的是，这并没有解决问题。 – Ferdy 2010-03-26 19:02:25

啊，这只是一个猜测。从查看其他答案和评论，您可能需要提供一个实例，以便我们可以重新提出问题并提出解决方案。 – 2010-03-26 20:17:43

您将需要确保在主题样式表中使用相同的选择器。 CSS优先考虑的是更“具体”选择不管什么顺序表是在

例如：

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

这里计算的颜色会#CCC，因为它是最具体的定义选择。如果你想覆盖它，只是把这个在你的主题表：

body #content p { 
    color: #000; 
}

来源

2010-03-26 18:54:30 Daniel

我正在使用完全相同的选择器，所以至今没有解释我的问题。范围界定不应该成为问题。 – Ferdy 2010-03-26 19:02:01

听起来好像值，以你的CSS元素是不一样的，您可以通过在乘坐的风格与第二样式表确保规则具有相同或更高的价值。

例如第一样式表

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

第二样式表

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

第二样式表中泰斯案件所以将使用更高的值。的CSS计分以下这些简单的规则

HTML元素 - 问鼎
类 - 数万
ID - 数百
内联样式 - 数以千计

而且使用Firebug检查elemtens和看哪一个正在被过度缠绕。

来源

2010-03-26 18:55:20 TheAlbear

如何让一个外部样式表有选择地推翻另一个

回答

相关问题