CSS单行多选择器最后一个元素未生效原因咨询

咱们来拆解下你遇到的问题，核心出在CSS选择器的作用范围上：

问题分析 #

你的CSS代码是：

#ask-us input[type=email], input[type=text]{ color: #121111; border: 3px solid #ccc; width: 171px; }

这里的逗号是分组选择器，它把两个独立的选择器合并成一组：

1. #ask-us input[type=email]：仅匹配ID为ask-us的元素内部的type=email输入框
2. input[type=text]：匹配页面上所有type=text的输入框

而你提供的HTML里的<input type="email">并没有被#ask-us元素包裹，所以第一个选择器根本命中不了它——如果这个email输入框就是你说的“最后一个未受影响的元素”，这就是核心原因。

另外还要排查两个潜在坑：

• 有没有拼写错误：比如#ask-us的ID在HTML里是不是写成了askus或者其他变体？
• 有没有优先级更高的CSS规则：比如这个输入框有没有行内样式（style属性），或者其他更具体的选择器（比如#postEmail）覆盖了当前样式？

解决方案 #

根据你的需求，有几种调整方式：

• 需求1：让所有email和text输入框都应用这个样式
  去掉父元素的限制，把CSS改成：

  input[type=email], input[type=text]{ color: #121111; border: 3px solid #ccc; width: 171px; }
  

• 需求2：仅让#ask-us内部的两种输入框生效
  调整HTML结构，把那个email输入框放到#ask-us容器内部，比如：

  <div id="ask-us">
    <p><!--EMAIL--> <input type="email" name="postEmail" id="postEmail" class="required" value="value" /><br /> </p>
  </div>
  </form><!--end form-->
  

• 需求3：只给特定的email输入框加样式
  直接把它的ID加入选择器分组：

  #ask-us input[type=email], input[type=text], #postEmail{ color: #121111; border: 3px solid #ccc; width: 171px; }
  

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