高级css表单选择器

Question

大家好，我有这个CSS选择器，我不知道如何阅读它。有人能解释一下吗?由于

.form__input:not(:placeholder-shown).form__input:not(:focus)+.form__label {

Answer 1

理想情况是，在嵌套的css类中，您将它们一个放在另一个下面以方便阅读，因为它可以包含许多元素和关于您的问题

.form__input:not(:placeholder-shown) 
// apply the class to all .form__input that do not have the selector "placeholder-shown".
.form__input:not(:focus) // applies the css to all .form__input not in "focus".
+.form__label // here applies the css to the input label
{