为什么我的部分CSS选择器无法生效？auto-fit与逗号选择器异常

问题根因及修复方案 #

1. .container .row100规则中auto-fit未生效问题 #

grid-template-columns: repeat(auto-fit, minmax(250px,1fr))规则作用于同一个grid容器下的所有直接子元素，你当前代码里每个.row100容器内只放了1个.col元素，自然只能显示为单列布局，auto-fit的自适应并排效果无法触发。
修复方式：将需要并排展示的字段对应的.col放在同一个.row100容器内，示例如下：

<div class="row100">
  <div class="col">
    <div class="inputBox">
      <input type="text" name="" required="required">
      <span class="text">First Name</span>
      <span class="line"></span>
    </div>
  </div>
  <div class="col">
    <div class="inputBox">
      <input type="text" name="" required="required">
      <span class="text">Last Name</span>
      <span class="line"></span>
    </div>
  </div>
</div>

调整后同一行有多个.col元素时，屏幕宽度满足要求就会自动并排，宽度不足时自动折行。

2. 群组选择器无法匹配元素问题 #

CSS类名是大小写敏感的，你CSS中定义的选择器是.inputBox（字母B大写），但HTML里写的是class="inputbox"（字母b小写），二者完全不匹配，所以所有关联样式都不会生效。
此外提交按钮的CSS选择器写的是input[type="submit"]，但HTML里按钮的type属性是button，也会导致按钮样式不生效。
修复方式：

• 将HTML中所有inputbox类名统一修改为inputBox，和CSS定义保持一致
• 将提交按钮的type属性改为submit，或者把对应CSS选择器修改为input[type="button"]

补充小优化：你CSS中.container .row100的grid-template-columns属性末尾缺少分号，虽然多数浏览器可以兼容，但补上分号更符合语法规范，避免潜在解析异常。

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