3

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

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

这是 Jsfiddle 中的一个清晰示例： 转到 JSfiddle

所以风格必须：

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

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

.green > * a

那么红色选择器必须是：

.red > * a

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

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

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

4

3 回答 3

3

因此，您必须将两个规则都修改为完全相同，是吗？您需要做的就是查看 HTML 并弄清楚如何选择锚点，以便它们更具体。在您的示例中，您可以看到 HTML 两者都具有.red并且与.green他们想要设置样式的锚点相距一个 div，因此只需将它们都更改为严格设置只有一个 div 的锚点的样式。现在，.red不会碰.green's 的锚点，因为它在两个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/

于 2013-06-20T21:28:10.937 回答
0

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

于 2013-06-20T21:27:30.730 回答
0

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

.red div.green div a { color:green;}
.red div a { color:red;}
于 2013-06-20T21:28:57.283 回答