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 +（兄弟）選擇器向上

回答

相關問題