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

Question

标记：

<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%;
    }
  }
}

Answer 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;
        }
    }
}