较少嵌套选择器

Question

我有以下代码

.signin-input{
    input{
        width: 100%;
        height: 2.5rem;
        color: black;

        :placeholder-shown{
        opacity: 1;
    }
    }

它导致以下CSS

.signin-input input :not(:placeholder-shown) {
  opacity: 1;
}

这会触发错误的选择器并导致错误。如何减少像

这样的正确对待

.signin-input input:not(:placeholder-shown) {
      opacity: 1;
}

Answer 1

您忘记使用&

.signin-input {
   input {
      width: 100%;
      height: 2.5rem;
      color: black;
      &:placeholder-shown {
          opacity: 1;
      }
   }
}

结果将

.signin-input input:placeholder-shown {
  opacity: 1;
}

  

＆运算符表示嵌套规则的父选择器，在将修改类或伪类应用于现有选择器时最常用。 来源：lesscss.org