嘿，这个问题的核心是CSS选择器的语法细节没搞对，咱们来拆解清楚：

问题出在哪？ #

先看你写的第二段代码：

form input [type = "email"], [type = "password"] { color: black; border-bottom: 2px solid red; }

这里第一个选择器 form input [type = "email"] 里，input 和 [type="email"] 之间有个空格——这就变成了后代选择器，意思是「在form下的input元素的后代里，找带有type="email"属性的元素」。但咱们的type="email"是直接写在input本身上的，所以这个选择器根本匹配不到任何元素！

而逗号后面的[type = "password"]是全局匹配所有带这个属性的元素，所以只有密码框会被修改。

再看你第一段能生效的代码，后面多了个独立的[type = "email"]选择器，这个是全局匹配所有邮箱输入框，所以邮箱框才会被命中，两段代码的差异就来自这里。

怎么修复？ #

只需要去掉input和属性选择器之间的空格，让属性选择器直接绑定在input元素上，同时确保每个逗号分隔的选择器都完整指向目标元素：

form input[type="email"], form input[type="password"] { 
  color: black; 
  border-bottom: 2px solid red; 
}

如果想简化代码（现代浏览器都支持），可以用:is()伪类来减少重复：

form input:is([type="email"], [type="password"]) { 
  color: black; 
  border-bottom: 2px solid red; 
}

关键知识点 #

• 元素选择器和属性选择器之间不能加空格，加空格就从「匹配带该属性的当前元素」变成「匹配当前元素的后代里带该属性的元素」了。
• 逗号分隔的多个选择器是相互独立的，每个都要写完整，不然会出现部分选择器失效的情况。

内容的提问来源于stack exchange，提问作者Omar Dajani