CSS样式仅对部分表单输入类型生效的问题求助

你的问题出在CSS选择器的优先级和选择器完整性上，我来一步步给你拆解清楚：

为什么原新增规则不生效？ #

原规则 #page_2_form input 的优先级是 ID选择器(100) + 元素选择器(1) = 101。而你新增的规则里：

• #page_2_form input[type=text] 优先级是 100 + 1 + 属性选择器(10) = 111，这个确实能覆盖原规则，所以text类型的input应该会变成黄色；
• 但 input[type=email] 只有 元素选择器(1) + 属性选择器(10) = 11，优先级远低于原规则的101，浏览器会优先应用优先级更高的规则，所以email类型的input还是会显示绿色背景，这就是问题根源。

修复方案 #

这里有两种简洁有效的解决方式：

方案1：补全选择器，确保覆盖规则优先级足够

把新增规则里的input[type=email]加上#page_2_form前缀，让它的优先级匹配原规则的层级：

#page_2_form input { 
    background-color: green; 
    width: 600px; 
}

#page_2_form input[type=text], #page_2_form input[type=email] { 
    background-color: yellow; 
    width: 600px; 
}

方案2：直接精准定位目标元素（更推荐）

与其先给所有input设置样式再覆盖，不如直接给phone和submit类型的input写专属规则，逻辑更清晰，也不会有优先级冲突：

/* 仅对phone和submit类型input应用绿色样式 */
#page_2_form input[type=phone], #page_2_form input[type=submit] {
    background-color: green;
    width: 600px;
}

/* 给text和email类型input设置黄色样式 */
#page_2_form input[type=text], #page_2_form input[type=email] {
    background-color: yellow;
    width: 600px;
}

额外简化技巧：使用:not选择器

如果你的表单里只有这四种类型的input，还可以用:not选择器一次性排除不需要的类型，代码更简洁：

#page_2_form input {
    background-color: green;
    width: 600px;
}

/* 排除phone和submit类型，给剩余input设置黄色 */
#page_2_form input:not([type=phone]):not([type=submit]) {
    background-color: yellow;
}

这个写法在现代浏览器中兼容性很好，能正常工作。

内容的提问来源于stack exchange，提问作者Grey-lover