Question

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

重要的是，某些页面可能包含两种样式的元素，在这种情况下，应用的样式应该是版本最近的父版本。例如，如果正文是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>

这样做的好方法是什么？

Answer 1

修改

根据OP的评论，此答案仅针对OP的具体测试用例，并未完全解决问题。

查看CSS Child Selectors

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

以下似乎有效：

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

您可以在此处查看此示例JsFiddle

SCSS / CSS最近的父选择器

1 个答案:

修改