css和/或SASS +（兄弟）选择器向上[重复]答案

【问题标题】：css and/or SASS + (sibling) selector upwards [duplicate]css和/或SASS +（兄弟）选择器向上[重复]
【发布时间】：2023-03-15 10:02:02
【问题描述】：

在 CSS 中，如果同级在输出中的上方（html 中的前一个元素），则无法使用加号选择同级。

例如

<div class="first">
<div class="second">

.second + .first { style applied to div.first}

有没有办法在 SASS/SCSS 中做到这一点？

【问题讨论】：

看到这个我会很惊讶，它违背了 CSS 流程。
以及 SASS 父选择器 .class &，但我想那是另一回事。
只是想说明，SASS 并没有给 CSS 添加任何特性！ CSS 是浏览器唯一支持的样式语言，除非 SASS 可以以某种方式被浏览器直接处理，否则它显然不会添加任何功能（实际上也不会）。
有一篇文章是关于如何破解这个medium.freecodecamp.org/…

标签： sass

【解决方案1】：

SASS 支持所有 CSS3 选择器。兄弟姐妹+就是其中之一。但它并没有带来一些额外的功能。这意味着你可以做到

first {
  + second { 
     font-size: smaller;
  }
}

但你不能用它影响父母......

Ps : 这似乎是 CSS4 的一个特性 :)

【讨论】：

【解决方案2】：

我知道这种感觉，这真的很烦人。我找到了一种快速的方法。

HTML

<div class="mainmenu">
  <div class="subnav">
    <ul>
      <li>Whatever</li>
    </ul>
  </div>
</div>

CSS 指向div "mainmenu" 的第一个孩子，> class "subnav"

 .mainmenu{
      & > .subnav{
         // Child Selector SCSS HERE
      }
  }

@thgaskell，你证明我错了 :) 我的代码运行良好，但我丢失了 6KB 的缩小代码！我已根据以下评论的通知方式更新了代码。

【讨论】：

【解决方案3】：

我最终使用了 Jquery。完成工作:) （对不起，当我走另一条路时，我不再有示例代码，但它很简单，类似“如果孩子有课，那么将课添加到这个”。 :)

【讨论】：

【解决方案4】：

可能适合也可能不适合您的需求，但您可以使用 Sass/CSS 中的通用兄弟选择器。这将选择同一节点级别上的所有元素（之前没有明确但仍然很方便）：

.second {
   .first ~ & {
       /* styles to be applied to .second if a .first exists at the same node level */   
   }
}

【讨论】：

【解决方案5】：

div { & + & { margin-left: 15px; background: firebrick;}}

试试看吧。

【讨论】：