Question

我需要一些明显的级联问题的帮助......不那么明显

我必须覆盖一些css子样式，使用另一种相同权重的样式（此处为012），而不在css表中移动它的顺序定义......

以下是Jsfiddle中的一个明显示例： Go to JSfiddle

所以风格必须：

不添加第三个选择器（只修改给定的两个）
保持样式定义中的顺序（红色前为绿色）
保持两个选择器相同，如果更改绿色选择器，则a选择器必须相同。
真正的HTML比提供的更便宜（a不仅仅是在div孩子里面）

例如，如果.green div a变为：

.green > * a

然后红色选择器必须是：

.red > * a

第二个链接必须是完全相同的选择器（颜色名称除外）

编辑：为什么我必须这样做：

在我的网站中，您可以自定义主题（颜色）。但是，当你看另一个用户profil时，你会看到他自己的颜色主题，但在你的主题内。所以绿色主题可以嵌入一个红色主题...有超过10个主题，所以我不能每个组合样式（绿色＆gt;红色，红色＆gt;绿色，蓝色＆gt;红色等...）< / p>

Answer 1

所以你必须完全修改两个规则，是吗？您需要做的就是查看HTML并找出如何选择锚点以使它们更具体。在您的示例中，您可以看到HTML同时具有.red和.green与他们想要设置样式的锚点相距一个div，因此只需更改它们以严格设置一个仅为一个div的锚点远。现在，.red不会触及.green的锚点，因为它距离div只有两个：

.green > div > a { color:green;}
.red > div > a { color:red;}

以下是您的示例的jsFiddle：http://jsfiddle.net/rgthree/54nUG/5/

已更新OP的编辑

您可以尝试的一件事是拥有一致的主题约定（这可以是单独的属性或前缀）。拿这个CSS：

.theme-green a,
[class*="theme-"] .theme-green a {color:green;}
.theme-red a,
[class*="theme-"] .theme-red a {color:red;}

假设所有主题都以theme-开头，我们可以使用上面的内容来覆盖样式。这里，第3行会覆盖第1行（像往常一样），但新行2会覆盖第3行，这就是你想要的（红色主题中的绿色主题）。当然，缺点是你的CSS代码加倍了。

这是新的jsFiddle：http://jsfiddle.net/54nUG/10/

Answer 2

.green div a { color:green!important;}

Answer 3

您可以添加更具体的选择器：

.red div.green div a { color:green;}
.red div a { color:red;}

Css Cascade打破了大师

3 个答案: