如何在 LESS 中编写 ~ 选择器？

问题描述

如何在 LESS 中编写此规则？我一直在查看 http://lesscss.org/ 的文档，但没有找到任何内容:(

input.text:focus { border: 1px solid #f00; }
input.text:focus ~ label.placeholder,input.text:not(:focus):valid ~ label.placeholder { color: #f00; }

我已经想通了，它有效，但我不知道如何正确地将第三行添加到此：

input.text { padding: 15px; background: #fff;
    &:focus { border: 1px solid #f00;
        ~label.placeholder { color: #f00; }
    }
}

解决方法

像下面那样做

input.text { padding: 15px; background: #fff;
    &:focus,&:not(:focus):valid {
        ~label.placeholder { color: #f00; }
    }
    &:focus {
       border: 1px solid #f00;
    }
}

这将编译成

input.text {
    padding: 15px;
    background: #fff;
}

input.text:focus ~ label.placeholder,input.text:not(:focus):valid ~ label.placeholder {
    color: #f00;
}

input.text:focus {
    border: 1px solid #f00;
}