Css 如何用更少的时间编写~selector？

如何用更少的时间编写此规则？我一直在查看文档，但没有找到任何内容：(

我已经弄明白了这一点，它是有效的，但我不知道如何正确地将第三行添加到其中：

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

---

要明确的是，您开始使用的也是“在较少的范围内”-CSS的有效性较低

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