SASS通配符*選擇家長中的所有ID

我在某處看到了使用*作爲SASS的ID或類選擇器的能力......正確的做法是什麼？SASS通配符*選擇家長中的所有ID

例如，我想選擇所有div id在父div內。我可以想象這樣的事：

<div id="parent"> 
       <div id="sub1"> 
        <div class="icon"></div> 
        <div class="content"></div> 
       </div> 
       <div id="sub2"> 
        <div class="icon"></div> 
        <div class="content"></div> 
       </div> 

#parent { 
    #* { 
}}

來源

2012-11-01 petergus

薩斯沒有這樣的通配符，但CSS *不*。 Sass也只知道什麼CSS知道你的文檔的標記（換句話說：什麼都沒有）。你可以重述一下你的問題嗎？因爲你不清楚你在找什麼。 – cimmanon

你能具體說明爲什麼簡單的CSS選擇器'#parent *'或'#parent div'不起作用嗎？ – bookcasey

是的，我有點不清楚，對不起，我已經更新了我上面的代碼。基本上我想選擇＃sub1和＃sub2。所以*和div不會工作（因爲然後它會選擇其他），然而，#parent> div *會*工作，我只是希望有一個時髦的方式來做到這一點：D我會嘗試下面的答案，由bookcasey發佈和發回！ – petergus

如果孩子們在一種有序的方式命名，你可以更容易地更新使用@for指令：

$num-of-children: 2 

@for $i from 1 through $num-of-children 
    #sub-#{$i} 
    @extend %parent-children 

#parent 
    %parent-children 
    //styles

此外，如果ID更加隨心所欲，你可以傳遞一個列表到@each指令來達到類似的效果：

$children: sam ramond lemons butter 

@each $child in $children 
    ##{$child} 
    @extend %parent-children 

#parent 
    %parent-children 
    //styles

來源

2012-11-01 19:16:15 bookcasey

謝謝，這是非常有趣的代碼！然而，我應該更具體地說，我的子div沒有實際編號，他們都有唯一的ID名稱。然而，這是很好的東西，我會牢記在心。想法如何使用它具有獨特的ID名稱的子div？我正在使用SCSS，所以我爲此格式化了 - 這裏是示例和輸出。 '$ num-of-children：2; @for我從$ 1到$ NUM-的子女{ #sub - ＃{$ I} { @extend％父子}} #parent ％父子{ 背景：藍色; }' '#parent＃sub-1，#toolbar #parent＃sub-2 {background}：blue; }'（編輯？） – petergus

我已經使用類似選項更新了我的答案，以獲得唯一名稱。 – bookcasey

只能使用一個CSS選擇器，喜歡的話：

#parent { 
    div[id] { 
     // styles 
    } 
}

或

#parent { 
    div[id^='sub'] { 
     // styles 
    } 
}

來源

2012-11-03 17:36:14 Duke

哦，這很酷！你能否詳細說一下'div [id^='sub']'是什麼...... ^是'sub'之後的任何通配符？ – petergus

@petergus雅！有更多的選擇器，請參閱http://www.w3.org/TR/css3-selectors/#selectors – Duke

SASS通配符*選擇家長中的所有ID

回答

相關問題