Css Cascade打破大师

Question

我需要一些帮助来解决一个明显的级联问题...不太明显

我必须用另一个相同重量的样式（这里是 012）覆盖一些 css 子样式，而不在 css 表中移动它的订单定义...

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

所以风格必须：

• 不要添加第三个选择器（只修改给定的两个）
• 保持样式定义中的顺序（红前绿）
• 保持两个选择器相同，如果更改绿色选择器，a 选择器必须相同。
• 真正的 HTML 比所提供的更复杂（a 不只是在 div 子级中）

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

.green > * a

那么红色选择器必须是：

.red > * a

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

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

在我的网站中，您可以自定义您的主题（颜色）。但是当您查看另一个用户配置文件时，您会在他自己的颜色主题中看到他的配置文件，但在您的主题中。所以绿色主题可以嵌入到红色主题中......有超过 10 个主题，所以我无法设置每个组合的样式（绿色 > 红色、红色 > 绿色、蓝色 > 红色等......）

Answer 1

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

.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;}