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

Question

如何在 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; }
    }
}

Answer 1

像下面那样做

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

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

How to write ~ selector in LESS?

css

less