50

在 CSS 中，如果兄弟在输出中的上方，即 html 中的前一个元素，则无法选择带有加号的兄弟。

例如

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

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

无论如何在 SASS/SCSS 中可以做到这一点？

4

5 回答 5

65

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

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

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

Ps : 好像是 CSS4 的一个特性 :)

于 2013-03-06T21:08:19.360 回答
5

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

HTML

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

SCSS

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

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

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

于 2013-03-19T14:50:39.957 回答
1

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

.second {
   .first ~ & {
       /* styles to be applied to .second if a .first exists at the same node level */   
   }
}
于 2013-11-14T17:25:42.737 回答
-2

我最终使用了 Jquery。完成工作 :) （抱歉，当我走另一条路线时，我不再有示例代码，但它非常简单，例如“如果孩子有课，则向此添加课”。:)

于 2013-03-20T09:41:54.640 回答
-6 
div { & + & { margin-left: 15px; background: firebrick;}}

试试它的工作。

于 2015-11-05T07:40:42.217 回答