SCSS / CSS 最接近父选择器答案

【问题标题】：SCSS / CSS closest parent selectorSCSS / CSS 最接近父选择器
【发布时间】：2014-10-15 18:35:47
【问题描述】：

我正在使用具有多种样式的代码库（来自重新设计）。我希望能够在元素上声明 class="v1" 或 class="v2" 以确定要使用的样式。

重要的是，某些页面可能包含具有两种样式的元素，在这种情况下，应用的样式应该是最接近版本的父级。例如，如果 body 是 v1，但 div 是 v2，那么里面的任何样式都应该是 v2。

在 SCSS 中，我可以这样做：

.v1 {
  p {
    // stuff for version 1 of the styles
  }
}

.v2 {
  p {
    // stuff for version 2 of the css
  }
}

哪种方式可以让我到达那里，但 v2 总是会覆盖 v1，因为它在 CSS 中较低。

例如，以下应该是红色，然后是蓝色，然后是红色，然后是蓝色。但是，它是红色的，然后是蓝色的，然后是蓝色的，然后是蓝色的。

<html>
  <head>
  <style type="text/css">
    .v1 span {
      color: red;
    }
    .v2 span {
      color: blue;
    }
  </style>
  </head>
  <body class="v1">
    <span>Outside</span>
    <div class="v2">
      <span>Div 1</span>
      <div class="v1">
        <span>Div 2</span>
        <div class="v2">
          <span>Div 3</span>
        </div>
      </div>
    </div>
  </body>
</html>

有什么好的方法可以做到这一点？

【问题讨论】：

标签： html css sass

【解决方案1】：

编辑

根据 OP 的评论，此答案仅针对 OP 的特定测试用例，并不能完全解决问题。

看看CSS Child Selectors

您之前所做的是告诉页面将 v1 类中的所有内容作为一个跨度并将红色应用于它。子 div 内的跨度都在具有 v1 类的父 div 内。使用子选择器，您可以明确告诉它在特定类中查找 span 的子元素。

以下似乎有效：

.v1 > span {
  color: red;
}
.v2 > span {
  color: blue;
}

你可以在这里查看这个例子JsFiddle

【讨论】：

我不确定这是否会继续在更深的嵌套中起作用，但确实如此。 jsfiddle.net/gerq2jbq/1
这只适用于这个特定的例子（跨度正好在 .v1 和 .v2 内）。问题更笼统：假设我有两个样式表，用于一个重要的网站，我希望它们适用，但仅适用于两种不同的上下文。我可以使用 SCSS 的所有功能。
我已更新我的答案以反映它不满足所有要求。当我能够提供更好的解决方案时，我会再次编辑。