css和/或SASS +（兄弟）选择器向上

在CSS中，如果兄弟在输出中位于html之前的元素之上，则无法选择具有加号的兄弟。css和/或SASS +（兄弟）选择器向上

例如

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

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

反正有没有做到这一点在SASS/SCSS？

来源

2013-03-06 petergus

我很惊讶地看到这一点，它违背了CSS流。 – hexblot 2013-03-06 11:41:47

以及SASS父类选择器'.class＆'，但我想这是别的。 – petergus 2013-03-06 14:05:11

只是想说明一下，SASS不会向CSS添加任何功能！ CSS是唯一的样式语言浏览器支持，除非SASS可以直接由浏览器处理，否则显然不会添加任何功能（并且不会）。 – 0fnt 2014-11-04 14:39:59

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

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

但你不能影响它父...

PS：这似乎是CSS4 :)

来源

2013-03-06 21:08:19 Xavier

即时通讯不试图定位父母，即时通讯设法瞄准兄弟姐妹，但不是下一个兄弟姐妹下来，而是。 – petergus 2013-03-07 12:40:25

同样的答案，Sass不提供这个...你必须等待CSS4 – Xavier 2013-03-09 13:29:02

的特征我知道那种感觉，这真的很烦人。我找到了一个快速的方法来做到这一点。

HTML：

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

-------->

SCSS：

// CSS指向朝至格 “的MainMenu” 的第一个孩子与类“subnav”。

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

====> thgaskell，你已经证明我错了:)我的代码工作正常，我失去了我的精缩代码6KB！我已经更新了代码，以便如何通知下面的评论。

来源

2013-03-19 14:50:39 Neil

在你的最后一个例子中，你可以用'＆> .subnav' [引用父选择器]替换第二行（http：// sass- lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_）。 – thgaskell 2013-03-19 15:03:02

你有没有测试过，如果它会帮助我...我会测试它。但我目前在一台没有sass的windows机器上（就像我使用CodeKit一样）.... – Neil 2013-03-20 16:36:44

-1

我结束了使用jquery。得到工作完成:) （对不起，我没有示例代码了，因为我去了另一条路线，但它很简单，就像'如果孩子有班，然后增加班级到这个':)

来源

2013-03-20 09:41:54 petergus

May or可能不适合您的需求，但您可以在Sass/CSS中使用常规兄弟选择器。这将选择在同一节点级别的所有元件（未明确之前，但还是方便）：

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

来源

2013-11-14 17:25:42

这将只在*'.first'之后选择兄弟*，而不是同一节点级别的所有元素。 – 2016-09-29 14:46:45

-2

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

尝试它，它的工作。

来源

2015-11-05 07:40:42

这不是OP所要求的。 – cimmanon 2015-11-05 12:12:38

css和/或SASS +（兄弟）选择器向上

回答

相关问题