如何像数学括号一样控制CSS选择器的运算顺序？

首先明确：CSS目前没有提供类似数学里()的语法来直接控制选择器的运算顺序。

你写的这个选择器无法生效，核心问题不是缺少括号，而是选择器逻辑不符合DOM结构：

( .wrapper > input:not(:blank) ) + .placeholder {
    background-color: green;
}

在你的HTML结构里，.placeholder是.wrapper的相邻兄弟，而非.wrapper内部input的相邻兄弟。相邻兄弟选择器+只能匹配紧跟在前一个选择器选中元素之后的同级元素，所以即便加上括号，这个选择器也找不到目标元素。

实现需求的正确写法 #

要实现“当.wrapper内的input不为空时，其相邻的.placeholder变色”的效果，可以使用CSS的:has()伪类（主流浏览器已支持），它能让父元素基于子元素的状态调整样式，间接实现你想要的逻辑：

.placeholder {
    width: 200px;
    height: 50px;
    background-color: red;
    margin-top: 20px;
}

/* 当.wrapper包含非空的input时，它的相邻兄弟.placeholder变绿色 */
.wrapper:has(> input:not(:blank)) + .placeholder {
    background-color: green;
}

补充说明 #

• :has()是CSS选择器 Level 4的特性，允许我们基于后代/子元素的状态选择父元素，填补了CSS无法“向上选择”的空白。
• :blank伪类用于匹配空输入元素，若遇到兼容性问题，也可以用:not(:placeholder-shown)替代（需给input设置placeholder属性）。

内容的提问来源于stack exchange，提问作者Adam Smielewski