SCSS：为什么父子选择器语法不应用样式？答案

【问题标题】：SCSS: Why Parent Child selector syntax does not apply styles?SCSS：为什么父子选择器语法不应用样式？
【发布时间】：2019-10-23 18:48:17
【问题描述】：

标记：

<div class="form">
  <div class="form-row">
    <div class="text-field">
      /* I want to apply styles for this div */
    </div>
  </div>
</div>

scss 样式：

.form {
  &-row {

    // WHY this doesn't work
    .text-field {
      width: 20%;
    }

    // WHY this doesn't work
    div.text-field {
      width: 20%;
    }

    // WHY this doesn't work
    & .text-field {
      width: 20%;
    }


    // This works. I don't want this syntax.
    div[class^='text-field'] {
      width: 20%;
    }
  }
}

【问题讨论】：

所有这些选项都有效。 jsfiddle.net/Lbwdk92y/1 - 取消注释要测试的背景颜色。
您是否正确编译了您的 SASS？除了第三个jsfiddle.net/vybL1sc7/1，所有选项都应该有效
@Turnip，不，我的代码中没有！我不会问他们是否这样做。
您提供的代码工作正常，所以问题出在其他地方。你做了什么来调试这个？ SCSS 真的在编译吗？编译后的 CSS 是什么样的？当您只提供一个工作代码 sn-p 时，任何人都很难回答您的问题。

标签： css sass

【解决方案1】：

所有选项都正常工作... 我只是检查使用背景颜色：

.form {
    &-row {

        // WHY this doesn't work
        .text-field {
            width           : 20%;
            background-color: red;
        }

        // WHY this doesn't work
        div.text-field {
            width           : 20%;
            background-color: red;
        }

        // WHY this doesn't work
        & .text-field {
            width           : 20%;
            background-color: red;
        }


        // This works. I don't want this syntax.
        div[class^='text-field'] {
            width           : 20%;
            background-color: red;
        }
    }
}

【讨论】：