SASS 通配符 * 选择父项中的所有 id答案

【问题标题】：SASS wildcard * to select all ids inside a parentSASS 通配符 * 选择父项中的所有 id
【发布时间】：2015-04-08 10:10:05
【问题描述】：

我曾在某处看到使用 * 作为 SASS 的 ID 或类选择器的能力......这样做的正确方法是什么？

例如，我想选择父 div 中的所有 div id。我会想象这样的事情：

<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 {
   #* {
}}

【问题讨论】：

Sass 没有这样的通配符，但 CSS 有。 Sass 也只知道 CSS 对文档标记的了解（换句话说：什么都不知道）。你能改写你的问题吗？因为不清楚您到底在寻找什么。
您能否具体说明一下为什么简单的 CSS 选择器 #parent * 或 #parent div 不起作用？
是的，我有点不清楚，抱歉，我已经更新了上面的预期代码。基本上我想选择#sub1 和#sub2。所以 * 和 div 不会工作（因为它会选择其他人）但是，#parent > div would 工作，我只是希望有一种时髦的方式来做到这一点：D 我会尝试回答下面由 bookcasey 发布并回发！
同样，对于该示例，您可以使用 #parent > div（纯 CSS）仅选择直接后代。

标签： sass

【解决方案1】：

你只能使用一个 css 选择器，喜欢它：

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

或

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

【讨论】：

哦，太酷了！您能否详细说明一下div[id^='sub'] 是什么... ^ 是“sub”之后任何内容的通配符？
@petergus 呀！还有更多这样的选择器，请参阅w3.org/TR/css3-selectors/#selectors

【解决方案2】：

如果以有序的方式命名子项，则可以使用 @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

【讨论】：

谢谢，这是非常有趣的代码！但是，我应该更具体地说，我的子 div 实际上没有编号，它们都有唯一的 ID 名称。但是，这是个好东西，我会记住的。想法如何将其用于具有唯一 ID 名称的子 div？我正在使用 SCSS，所以我为此进行了格式化 - 这是示例和输出。 $num-of-children: 2; @for $i from 1 through $num-of-children { #sub-#{$i}{ @extend %parent-children } } #parent %parent-children { background: blue; }#parent #sub-1, #toolbar #parent #sub-2 { background: blue; }（编辑？）
我已经用一个类似的唯一名称选项更新了我的答案。