LESS嵌套选择器编译异常：如何正确处理:placeholder-shown伪类？

你的问题根源在于LESS嵌套选择器的解析逻辑——直接在input嵌套内写:placeholder-shown时，LESS会默认把它当作后代选择器处理，自动在父选择器和伪类之间插入空格，最终生成了错误的input :not(:placeholder-shown)（这个空格会让选择器匹配input内部的元素，而非input本身）。

正确的LESS写法 #

你需要用&符号引用父选择器，让伪类直接附加到父选择器上，避免多余空格：

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

编译后的目标CSS #

这样处理后，LESS会正确编译出你需要的结果：

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

原理补充 #

在LESS中，&是当前父选择器的引用符号，当你把&和伪类/伪元素连写时，LESS会直接将它们拼接在一起，不会插入空格。而如果省略&直接写伪类，LESS会认为你要选择父元素内部的匹配伪类的后代元素，这就是错误空格产生的原因。

内容的提问来源于stack exchange，提问作者Anton Stafeyev