css和/或SASS +（同级）选择器向上[重复]

Mandy小小西门2020-03-19

In CSS there is no way to select a sibling with plus if the sibling is above in the output, a preceding element in the html.

For example

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

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

Is there anyway to do this in SASS/SCSS?

蛋蛋Davaid猴子2020/03/19 12:42:42

可能会或可能不适合您的需求，但是您可以在Sass / CSS中使用常规的同级选择器。这将选择同一节点级别上的所有元素（在此之前未明确指定，但仍很方便）：

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

Tom米亚老丝2020/03/19 12:42:42

SASS支持所有CSS3选择器。同胞+是其中之一。但这并没有带来一些额外的功能。这意味着你可以做

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

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

ps：这似乎是CSS4的功能：）

LEYPro前端2020/03/19 12:42:42

我最终使用了Jquery。完成工作:)（对不起，我走了另一条路线时，我不再有示例代码，但是它很简单，就像“如果孩子有课，然后给它添加课”。:)

ALEYHarry2020/03/19 12:42:41

我知道这种感觉，真是烦人。我发现了一种快速的方法。

的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的缩小代码！我已经更新了代码，并告知了以下评论。

神无Tom2020/03/19 12:42:41

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

尝试它的工作。

Newest Answer