高级 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
{

高级 css 表单选择器

Advanced css form selectors

css

css-selectors