SCSS / CSS最近父选择器

jucafojl 于 2023-01-18 发布在其他

关注(0)|答案(2)|浏览(185)

我正在使用一个具有多种样式的代码库（来自重新设计）。我希望能够在元素上声明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>

做这件事的好方法是什么？

css

来源：https://stackoverflow.com/questions/25437988/scss-css-closest-parent-selector

2条答案

按热度按时间

0qx6xfy61#

编辑

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

看一看CSS子选择器
您之前所做的是告诉页面获取v1类中作为span的所有内容，并将其应用为红色。子div中的span都在具有v1类的父div中。使用子选择器，您专门告诉它在特定类中查找span的子元素。
以下方法似乎有效：

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

您可以在JsFiddle查看此示例

赞(0）回复(0）举报 2023-01-18

rjee0c152#

我建议在这里使用CSS变量/自定义属性，例如

.v1 {
  --color: red;
}

.v2 {
  --color: blue;
}

span {
  color: var(--color);
}

<div 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 class="v1">
          <span>Div 4</span>
          <div class="v2">
            <span>Div 5</span>
            <div class="v1">
              <span>Div 6</span>
              <div class="v2">
                <p>
                  <span>Div 7</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-01-18

我来回答

SCSS / CSS最近父选择器

2条答案

编辑

相关问题

热门标签

最新问答